如何避免localStorage中数组数据刷新页面后被重置？

嗨，这个问题我太熟悉啦！核心问题出在页面初始化的逻辑上：每次刷新页面时，你都会把films重新定义成空数组[]，所以点击按钮添加新数据时，其实是往这个空数组里塞新元素，然后把它覆盖存回localStorage，之前保存的旧数据自然就被清空了。

• 页面加载时，先从localStorage里读取已经保存的电影数据，把它转成数组赋值给films
• 如果localStorage里还没有任何数据，再用空数组兜底

下面是修改后的完整代码：

$(document).ready(function(){
    // 初始化时优先读取localStorage的已有数据，没有则用空数组
    var films = JSON.parse(localStorage.getItem("films")) || [];
    
    $('button').click(function(){
        var film = { 
            'id': films.length + 1, // 改成动态生成唯一id，避免重复
            'title':'John Wick', 
            'Genre':'Action' 
        };
        films.push(film);
        localStorage.setItem("films", JSON.stringify(films));
        
        // 可以打印到控制台查看效果
        console.log("当前保存的电影数据：", JSON.parse(localStorage.getItem("films")));
    });
});

• JSON.parse(localStorage.getItem("films"))：因为localStorage只能存储字符串类型，所以要把取出来的字符串转成数组对象才能操作。
• || []：如果是第一次打开页面，localStorage里还没有"films"这个键，getItem会返回null，这时候用逻辑或运算符让films取空数组，避免后续执行push操作时报错。
• 我把示例里固定的id:4改成了films.length + 1，这样每次添加的电影id都是唯一的，实际开发中你也可以用时间戳或者其他方式生成唯一标识。

这样修改后，不管怎么刷新页面，再添加新数据时都会保留之前的旧内容啦！

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla