如何修改保存按钮实现本地存储数组项的添加、移除与去重？

嘿，我明白你的需求了——就是要让保存按钮变成「切换开关」：没保存过就添加到localStorage，已经保存过就从里面移除，还得避免重复存储对吧？我帮你调整代码，完美实现这个功能：

$('.saveButton').click(function() {
    // 从sessionStorage获取当前选中的电影数据
    const film = JSON.parse(sessionStorage.getItem("film"));
    // 先从localStorage取出已保存的电影数组，没有的话初始化空数组
    let savedFilms = JSON.parse(localStorage.getItem("savedFilms")) || [];
    
    // 用电影的唯一标识（比如id）检查是否已在收藏列表中
    const targetIndex = savedFilms.findIndex(item => item.id === film.id);
    
    if (targetIndex !== -1) {
        // 已存在就移除该项
        savedFilms.splice(targetIndex, 1);
        // 更新按钮文本，让用户知道现在可以重新保存
        $(this).text("保存");
        console.log("电影已从收藏中移除");
    } else {
        // 不存在就添加到数组
        savedFilms.push(film);
        // 更新按钮文本，提示现在可以移除
        $(this).text("移除");
        console.log("电影已添加到收藏");
    }
    
    // 把更新后的数组存回localStorage，确保数据持久化
    localStorage.setItem("savedFilms", JSON.stringify(savedFilms));
});

关键细节说明： #

• 初始化数组容错：用|| []处理localStorage还没有savedFilms键的情况，避免null导致后续数组操作报错。
• 精准判断重复：用findIndex通过电影的唯一标识（比如id）检查，比用名称更可靠（毕竟可能有同名电影），你可以根据实际数据结构调整判断条件。
• 状态可视化：每次操作后更新按钮文本，让用户一眼就能知道当前按钮的功能，提升交互体验。
• 数据同步：操作完成后必须把更新后的数组重新存回localStorage，不然修改不会生效。

另外，如果你希望页面刚加载时，按钮就显示正确的状态（比如电影已经被收藏，按钮直接显示「移除」），可以加一段初始化代码：

// 页面加载完成后，自动设置按钮初始状态
$(document).ready(function() {
    const film = JSON.parse(sessionStorage.getItem("film"));
    const savedFilms = JSON.parse(localStorage.getItem("savedFilms")) || [];
    const isAlreadySaved = savedFilms.some(item => item.id === film.id);
    
    $('.saveButton').text(isAlreadySaved ? "移除" : "保存");
});

这样用户打开页面时，按钮状态就和实际收藏情况一致啦！

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