localStorage 没有更新编辑的信息

Question

我在编辑本地存储数据时遇到问题。我在本地存储中保存了 Array of Array-list 并且它可以工作，或者保存。但是，当我尝试编辑时，它只是临时编辑，当我刷新页面时，编辑的数据消失了，它显示了我保存的原始数据

function editinfo(){
    var name = document.getElementById("nameB").value; 
    var price = document.getElementById("priceB").value;
    var quant = document.getElementById("quantityB").value;
    var retrieved = window.localStorage.getItem("done");
    var pro = JSON.parse(retrieved);
    for (i = 0; i < pro.length; ++i){
         if(pro[i][0] === name){ 
            pro[i][1]=  price
            pro[i][2] = quant; 
         } else{
            console.log("There is no such data to edit"); 
         }
    }
    window.localStorage.setItem("done", JSON.stringify(pro));  
}

// 我将信息保存在本地存储中，我从服务器读取数据。 var bevInventory = $.getJSON('http://pub.jamaica-inn.net/fpdb/api.php?username=jorass&password=jorass&action=inventory_get');

function Info(){
    var info = []; 
    bevInventory.done(function(result){
        for(i = 0; i < result.payload.length; ++i){
         if(result.payload[i].namn != ""){
         var makeList = [result.payload[i].namn, result.payload[i].price, result.payload[i].count];
         info.push(makeList);
         }
        }
        var xx =  window.localStorage.setItem("done", JSON.stringify(info)); 
    })

    return info; 
}

Answer 1

一种解决方案是先检查，如果不存在则将数据添加到本地存储。像这样

function editinfo() {
    var name = 'bob';
    var price = 1;
    var quant = 2; // loaded dynamically from page.

    if (window.localStorage.hasOwnProperty("done")) {
        var retrieved = window.localStorage.getItem("done");
        var pro = JSON.parse(retrieved);
        for(i = 0; i < pro.length; ++i){
            if(pro[i][0] === name){ 
               pro[i][1] =  price
               pro[i][2] = quant; 
            }
        }
    } else {
        pro = [[name, price, quant]];
    } 
    window.localStorage.setItem("done", JSON.stringify(pro));  
}

Answer 2

如果 localStorage 中最初没有“完成”数据，您的代码将失败。 JSON.parse() 解析null（因为没有数据），然后在线出错

pro.length

所以最好检查一下是不是第一次上线，没有数据：

if (!pro) {
    pro = [];
}

例如here

第一次执行editinfo()后，数据成功保存在localStorage中。