如何通过代码添加不同txt1值扩展localStorage存储条目

算力阿峰

2026-8-23

解决localStorage存储多个独立文本值的问题

问题分析

你当前的代码每次点击都会用新的txt1值覆盖掉之前存储的内容，还存在两个明显错误：

localStorage.getItem("notes")返回的是字符串或null，没有.value属性，这会直接导致报错
每次都创建一个只包含当前txt1值的对象，而非维护一个能存储多个值的集合

解决方案

要实现存储多个独立的txt1值，我们需要把这些值放在数组里，每次新增值时先读取已有数组，添加新值后再存回localStorage。

修正后的完整代码

let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function(e) {
    // 获取输入框的值并去除首尾空格
    let txt1 = document.getElementById("txt1").value.trim();
    // 空值不存储
    if (!txt1) return;

    // 读取已有笔记：如果不存在则初始化为空数组
    let existingNotes = JSON.parse(localStorage.getItem("notes")) || [];
    // 将新值添加到数组末尾
    existingNotes.push(txt1);
    // 把更新后的数组转成字符串存回localStorage
    localStorage.setItem("notes", JSON.stringify(existingNotes));

    // 可选：清空输入框，提升用户体验
    document.getElementById("txt1").value = "";
});