使用 JavaScript 向 localStorage 添加新对象

本教程旨在解决如何使用 JavaScript 向浏览器的 `localStorage` 中添加新的对象，而不会覆盖已存在的数据。我们将详细讲解如何读取现有的 `localStorage` 数据，将新对象追加到数据中，并将更新后的数据保存回 `localStorage`。通过学习本教程，你将掌握 `localStorage` 的基本操作，并能灵活地存储和管理数据。

localStorage 是 Web 浏览器提供的一种用于在客户端存储数据的机制。它允许网站将数据存储在用户的浏览器中，并在以后的会话中检索这些数据。 这对于存储用户偏好、应用程序状态或其他需要在页面重新加载或浏览器关闭后仍然保留的数据非常有用。

核心问题：覆盖现有数据

初学者在使用 localStorage 时，经常遇到的问题是每次添加新数据都会覆盖之前存储的数据。这是因为 localStorage.setItem() 方法会覆盖指定键名下已有的值。为了解决这个问题，我们需要先读取现有的数据，将新数据添加到现有数据中，然后再将更新后的数据存储回 localStorage。

立即学习“Java免费学习笔记（深入）”；

解决方案：读取、追加、存储

下面是一个示例，展示了如何正确地向 localStorage 中添加新的对象，而不会丢失已有的数据：

function addNote() {
    const givenTitle = document.getElementById('titleInput');
    const givenNote = document.getElementById('noteInput');

    // 1. 从 localStorage 中读取现有的数据。如果不存在，则初始化为空数组。
    let notesObj = JSON.parse(localStorage.getItem("userNote")) || [];

    // 2. 创建新的对象
    let myObj = {
        title: givenTitle.value,
        note: givenNote.value,
    };

    // 3. 将新对象添加到数组中
    notesObj.push(myObj);

    // 4. 将更新后的数组存储回 localStorage
    localStorage.setItem('userNote', JSON.stringify(notesObj));
}

代码详解：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

1. let notesObj = JSON.parse(localStorage.getItem("userNote")) || [];: 这一行代码是关键。

   • localStorage.getItem("userNote")：尝试从 localStorage 中获取键名为 "userNote" 的数据。如果不存在，则返回 null。
   • JSON.parse(...)：将从 localStorage 中获取的 JSON 字符串转换为 JavaScript 对象（在本例中是一个数组）。如果 localStorage 中不存在数据（即 getItem 返回 null），则 JSON.parse(null) 会报错。
   • || []：使用逻辑或运算符 ||。如果 JSON.parse(localStorage.getItem("userNote")) 的结果为 null (因为 localStorage 中没有 "userNote" 键)，则 notesObj 将被赋值为空数组 []。这确保了我们始终有一个数组可以用来添加新的笔记。

2. let myObj = { title: givenTitle.value, note: givenNote.value };: 创建一个包含标题和笔记内容的新对象。从对应的input输入框中获取title和note。

3. notesObj.push(myObj);: 将新创建的对象 myObj 添加到 notesObj 数组的末尾。

4. localStorage.setItem('userNote', JSON.stringify(notesObj));: 将更新后的 notesObj 数组转换回 JSON 字符串，并将其存储回 localStorage 中，键名为 "userNote"。JSON.stringify() 方法用于将 JavaScript 对象转换为 JSON 字符串，因为 localStorage 只能存储字符串。

注意事项：

• 数据类型： localStorage 只能存储字符串。因此，你需要使用 JSON.stringify() 将 JavaScript 对象转换为字符串，并在读取时使用 JSON.parse() 将字符串转换回 JavaScript 对象。
• 错误处理： 在使用 JSON.parse() 时，要考虑到 localStorage 中可能没有数据的情况，并进行相应的处理，例如使用 || [] 来初始化一个空数组。
• 容量限制： localStorage 的存储容量有限制，通常为 5MB 或 10MB，具体取决于浏览器。因此，不要存储过大的数据。
• 安全性： 存储在 localStorage 中的数据对用户可见，因此不要存储敏感信息，例如密码或信用卡信息。

总结：

通过本教程，你学习了如何使用 JavaScript 向 localStorage 中添加新的对象，而不会覆盖已有的数据。关键在于先读取现有的数据，将新数据添加到现有数据中，然后再将更新后的数据存储回 localStorage。 掌握了这些技巧，你就可以更好地利用 localStorage 来存储和管理客户端数据。

以上就是使用 JavaScript 向 localStorage 添加新对象的详细内容，更多请关注php中文网其它相关文章！