使用JQuery向localStorage追加对象时遇到的问题

你的saveVerse函数存在几个关键问题导致无法追加保存经文：

主要错误点 #

1. 未初始化空数组：当localStorage中没有savedVerses数据时，JSON.parse(localStorage.getItem("savedVerses"))会返回null，后续尝试向null执行push操作会直接报错。
2. 变量名冲突：函数名saveVerse与内部变量名saveVerse重复，可能导致逻辑混乱。
3. 错误的数组操作：
   • 你将单个经文对象包装成了数组（var saveVerse = [{...}]），但实际上只需要单个对象。
   • 使用$(data).push({saveVerse})是错误的：$(data)把数组转为jQuery对象，且{saveVerse}会额外嵌套一层对象，导致存储结构不符合预期。
4. 缺少切换逻辑：因为高亮是切换状态（点击添加/移除高亮），保存逻辑也应该对应地添加/移除经文在localStorage中的记录，而不是一直追加。

修正后的saveVerse函数 #

function saveVerse(verse) {
    // 初始化数据：如果localStorage中没有数据，设为空数组
    let data = JSON.parse(localStorage.getItem("savedVerses")) || [];
    
    // 构造当前经文的对象（避免变量名冲突，改用verseObj）
    const verseObj = {
        book: "{{ book }}",
        chapter: {{ chapter }},
        verse: verse
    };
    
    // 检查当前经文是否已存在于保存列表中
    const existingIndex = data.findIndex(item => 
        item.book === "{{ book }}" && 
        item.chapter === {{ chapter }} && 
        item.verse === verse
    );
    
    if (existingIndex !== -1) {
        // 已存在则移除（对应取消高亮）
        data.splice(existingIndex, 1);
    } else {
        // 不存在则添加（对应高亮）
        data.push(verseObj);
    }
    
    // 保存回localStorage
    localStorage.setItem("savedVerses", JSON.stringify(data));
}

页面加载时恢复高亮状态 #

为了在用户重新访问页面时恢复之前的高亮，需要在页面加载完成后读取localStorage并为对应的经文添加高亮类：

$(document).ready(function() {
    const savedVerses = JSON.parse(localStorage.getItem("savedVerses")) || [];
    
    savedVerses.forEach(item => {
        // 找到对应的经文span并添加高亮类（假设你的高亮类名为highlight）
        $(`#${item.verse}`).addClass("highlight");
    });
});

关键修复说明 #

• 初始化空数组：使用|| []确保data始终是数组类型，避免null导致的报错。
• 变量名修正：将内部变量从saveVerse改为verseObj，避免与函数名冲突。
• 切换逻辑实现：通过findIndex检查经文是否已保存，存在则移除，不存在则添加，与高亮的切换行为保持一致。
• 正确的数组操作：使用原生数组的push和splice方法，避免不必要的jQuery包装和对象嵌套。

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