如何用数组在localStorage中存储AJAX数据并避免覆盖原有内容？

看起来你已经迈出了第一步，但现在卡在了新数据覆盖旧数据的问题上——这是因为你每次点击时直接把单个film对象存了进去，没有做数组的追加或状态切换逻辑。我帮你调整一下代码，实现「切换保存/取消」+「数组存储不覆盖」的功能：

修改后的完整代码 #

$('.saveButton').click(function() {
    // 1. 先从localStorage读取已保存的数组，没有的话初始化空数组
    let savedFilms = JSON.parse(localStorage.getItem("save") || "[]");
    // 2. 从sessionStorage获取当前要操作的film数据
    let currentFilm = JSON.parse(sessionStorage.getItem("film"));
    if (!currentFilm) return; // 如果session里没有film数据，直接退出

    let $this = $(this);
    // 3. 判断当前film是否已经在保存列表中（用唯一标识判断，这里假设film有id字段）
    let filmIndex = savedFilms.findIndex(film => film.id === currentFilm.id);

    if (filmIndex === -1) {
        // 4. 未保存过就添加到数组
        savedFilms.push(currentFilm);
        $this.removeClass("saveButton").addClass("savedButton"); // 切换成已保存样式
    } else {
        // 5. 已保存过就从数组移除
        savedFilms.splice(filmIndex, 1);
        $this.addClass("saveButton").removeClass("savedButton"); // 切回未保存样式
    }

    // 6. 把更新后的数组存回localStorage
    localStorage.setItem("save", JSON.stringify(savedFilms));
});

关键逻辑说明 #

• 读取已有数据：每次操作前先从localStorage取出已保存的数组，而不是直接用sessionStorage的单个数据，这样才能保留之前的内容。
• 状态切换：通过findIndex判断当前电影是否已保存，实现「点击保存/取消」的双向操作，配合按钮样式的切换。
• 唯一标识：我用了film.id作为判断重复的依据，你需要根据自己的film数据结构换成对应的唯一字段（比如电影名称、唯一编号等），避免重复添加。

后续循环读取数据的方法 #

之后要展示已保存的电影时，只需要取出数组然后循环遍历即可：

// 读取保存的数组
let savedFilms = JSON.parse(localStorage.getItem("save") || "[]");
// 循环遍历渲染
savedFilms.forEach(film => {
    console.log("已保存的电影：", film);
    // 这里可以写渲染到页面的逻辑，比如创建DOM元素展示电影信息
});

这样修改后，你点击保存按钮时就不会覆盖旧数据，而是在数组里添加或移除对应的数据，后续也能通过循环读取所有保存的内容啦。

内容的提问来源于stack exchange，提问作者Sam