如何将 JSON 对象保存在 LocalStorage 中

在 JavaScript 中，LocalStorage 是一种可以存储键值对的浏览器端 API。通过 LocalStorage，你可以在浏览器端存储一些数据，比如用户设置、浏览历史记录等，这些数据会保存在浏览器的本地存储中。

在本文中，我们将介绍如何将一个 JSON 对象保存在 LocalStorage 中。

前置知识

在正式开始讲解之前，我们需要了解一些前置知识。

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以键值对的形式表示数据，这些键值对由逗号分隔，整个 JSON 对象由大括号包裹。例如：

{
  "name": "Alice",
  "age": 30,
  "hobbies": ["reading", "traveling"]
}

LocalStorage

LocalStorage 是一种浏览器端的 API，它提供了一种可以存储键值对的机制。通过 localStorage，你可以在浏览器端临时或者永久地保存数据，这些数据只会保存在浏览器的本地存储中，不会被发送到服务器上。

LocalStorage 提供了以下三个方法：

• setItem(key, value)：将键值对添加到 localStorage 中。
• getItem(key)：根据键获取 localStorage 中保存的值。
• removeItem(key)：从 localStorage 中删除指定的键值对。

将 JSON 对象保存到 LocalStorage

要将一个 JSON 对象保存到 LocalStorage 中，我们需要先将它转换成一个字符串，然后使用 setItem 方法将它保存到 LocalStorage 中。

const person = {
  name: 'Alice',
  age: 30,
  hobbies: ['reading', 'traveling']
};

localStorage.setItem('person', JSON.stringify(person));

在这个例子中，我们定义了一个名为 person 的 JSON 对象，然后使用 JSON.stringify 方法将它转换成一个字符串。接着，我们使用 setItem 方法将它保存到 LocalStorage 中，将键名设置为 person。

从 LocalStorage 中获取 JSON 对象

要从 LocalStorage 中获取一个 JSON 对象，我们需要先使用 getItem 方法获取保存在 LocalStorage 中的字符串，然后使用 JSON.parse 方法将它转换成 JSON 对象。

const savedPerson = JSON.parse(localStorage.getItem('person'));
console.log(savedPerson.name); // Alice
console.log(savedPerson.age); // 30
console.log(savedPerson.hobbies); // ["reading", "traveling"]

在这个例子中，我们使用 getItem 方法获取保存在 LocalStorage 中的字符串，然后使用 JSON.parse 方法将它转换成 JSON 对象。接着，我们可以访问对象的属性，比如 name、age 和 hobbies。

从 LocalStorage 中删除 JSON 对象

要从 LocalStorage 中删除一个 JSON 对象，我们可以使用 removeItem 方法。

localStorage.removeItem('person');

在这个例子中，我们使用 removeItem 方法删除保存在 LocalStorage 中键名为 person 的键值对。

结论

在本文中，我们学习了如何将 JSON 对象保存在 LocalStorage 中。首先，我们使用 JSON.stringify 方法将 JSON 对象转换成字符串，然后使用 setItem 方法将它保存到 LocalStorage 中。接着，我们使用 getItem 方法获取 LocalStorage 中保存的字符串，并使用 JSON.parse 方法将它转换成 JSON 对象。最后，我们演示了如何从 LocalStorage 中删除键值对。