本地存储集项目替换而不是更新答案

【问题标题】：Local storage set Item replaces instead of update本地存储集项目替换而不是更新
【发布时间】：2020-06-11 12:39:55
【问题描述】：

我尝试使用setItem 将我的数据保存在本地存储中，但是当我刷新 chrome 选项卡并将数据添加到我的数组时，localStorage 中的数据会删除旧数据并设置新数据，而不是更新旧数据。

这是我的代码：


let capacity = 200;
let reservedRooms = 0;
let users = [];

let rsBox = document.getElementById('reservebox');

class Reserver {
    constructor(name , lastName , nCode , rooms){
        this.name = name ;
        this.lastName = lastName ;
        this.nCode = nCode ;
        this.rooms = rooms ;
    }

    saveUser(){
        if(this.rooms > capacity){
            console.log('more than capacity');
        }else{
            users.push({
                name : this.name ,
                lastName : this.lastName ,
                id : this.nCode ,
                rooms : this.rooms
            });
            capacity -= this.rooms ;
            reservedRooms += this.rooms ;
        }
    }

    saveData(){
        localStorage.setItem('list',JSON.stringify(users));
    }



}


rsBox.addEventListener('submit',function(e){

    let rsName = document.getElementById('name').value;
    let rsLastName = document.getElementById('lastname').value;
    let rsNationalCode = Number(document.getElementById('nationalcode').value);
    let rooms = Number(document.getElementById('rooms').value);

    //Save the user data
    let sign = new Reserver(rsName , rsLastName , rsNationalCode , rooms);
    sign.saveUser();
    sign.saveData();





    e.preventDefault();
});

【问题讨论】：

标签： javascript json local-storage

【解决方案1】：

每次重新加载页面时，您都会推送一个空的用户数组，要解决此问题，您需要从存储中的项目填充用户数组。

例如

let users = [];

需要类似

let users = JSON.parse(localStorage.getItem('list')) || [];

关键是您需要加载现有用户才能添加到他们，如果您不这样做，那么您实际上是在每次页面加载并将数据放入其中时创建新的用户数组。

您可能想要创建类似于“loadData”的函数来检查数组是否已初始化，如果是则加载它，如果不是则创建它。您可以使其通用，以便您可以使用它来访问任何键并在键不存在时提供默认值，例如

function loadData(key, def) {
    var data = localStorage.getItem(key);
    return null == data ? def : JSON.parse(data)
}

然后

// load "list" - set to an empty array if the key isn't present
let users = loadData('list', []);

【讨论】：

非常感谢。我的问题解决了。我是 javascript 的菜鸟 XD

【解决方案2】：

另一种选择是更改saveData 方法，这样您就不必在加载应用程序时加载localStorage：

saveData(){
        let newList = JSON.parse(localStorage.getItem('list') || '[]')
        if(users.length) newList.push(users[users.length - 1]);
        localStorage.setItem('list',JSON.stringify(newList));
        newList=null;
}

注意：使用 localStorage 时要小心，因为它在所有浏览器上的容量都不相同，您可以查看this post 了解更多信息

【讨论】：