将新对象添加到 localStorage 的正确方法-js教程-PHP中文网

将新对象添加到 localstorage 的正确方法

本文旨在解决 JavaScript 中如何向 localStorage 添加新对象，而非覆盖现有数据的问题。我们将探讨如何正确地读取、更新和存储数据，确保每次添加新对象时，localStorage 都能保存所有历史数据。通过本文，你将学会避免常见错误，并掌握 localStorage 的正确使用姿势。

在使用 JavaScript 操作 localStorage 时，一个常见的需求是将新的对象添加到已有的数据集中，而不是简单地覆盖它。以下将详细介绍如何实现这一目标。

理解 localStorage 的工作原理

localStorage 是一种 Web API，允许你在用户的浏览器中存储键值对。这些数据在浏览器会话之间持久存在，除非被显式删除。localStorage 只能存储字符串类型的数据。因此，当你需要存储对象或数组时，需要先将其序列化为 JSON 字符串，然后再存储。读取数据时，需要将 JSON 字符串反序列化为 JavaScript 对象。

正确添加新对象的步骤

读取现有的数据： 首先，尝试从 localStorage 中读取现有的数据。如果 localStorage 中没有数据，则创建一个空数组。
```
let notesObj = JSON.parse(localStorage.getItem("userNote")) || [];
```
这行代码首先尝试从 localStorage 中获取名为 "userNote" 的数据。JSON.parse() 用于将 JSON 字符串转换为 JavaScript 对象。如果 localStorage.getItem("userNote") 返回 null（表示没有数据），则 || [] 会创建一个空数组，赋值给 notesObj。
创建新的对象： 接下来，创建要添加到 localStorage 的新对象。
```
let myObj = {
    title: givenTitle.value,
    note: givenNote.value,
}
```
这里假设 givenTitle 和 givenNote 是 HTML 输入元素的引用，分别包含了标题和笔记的内容。

java-api-doc-generator
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
将新对象添加到数组： 将新创建的对象添加到从 localStorage 中读取（或创建）的数组中。
```
notesObj.push(myObj);
```
将更新后的数组存储回 localStorage： 最后，将更新后的数组序列化为 JSON 字符串，并存储回 localStorage。
```
localStorage.setItem('userNote', JSON.stringify(notesObj));
```
JSON.stringify() 用于将 JavaScript 对象转换为 JSON 字符串，以便存储在 localStorage 中。

完整的示例代码

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

    let notesObj = JSON.parse(localStorage.getItem("userNote")) || [];

    let myObj = {
        title: givenTitle.value,
        note: givenNote.value,
    }

    notesObj.push(myObj);

    localStorage.setItem('userNote', JSON.stringify(notesObj));
}

注意事项