从本地存储中存储和检索对象 - Javascript

本地存储是一种在浏览器中存储数据的方式。在Javascript的世界中，有两种主要的本地存储方式：cookie和本地存储API（localStorage和sessionStorage）。

本文将会介绍如何使用localStorage来存储和检索Javascript对象。

什么是localStorage

localStorage是浏览器提供的一种在本地存储数据的方式。它的特点是可以存储大量的数据，并且可以跨页面和浏览器会话进行检索。

localStorage的用法非常简单，只需要通过window.localStorage对象来访问即可。

如何存储Javascript对象

要在localStorage中存储Javascript对象，需要将对象转换为JSON字符串，然后使用localStorage.setItem(key, value)方法来存储它。

下面是一个示例，演示了如何将一个Javascript对象存储到localStorage中：

const myObject = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem('myKey', jsonString);

在上述示例中，我们首先定义了一个名为myObject的Javascript对象，然后使用JSON.stringify()方法将它转换为JSON字符串。接着，我们使用localStorage.setItem()方法将该字符串存储到了localStorage中，使用了myKey作为该存储数据的键值。

如何检索Javascript对象

要从localStorage中检索Javascript对象，需要使用localStorage.getItem(key)方法来获取存储在localStorage中的JSON字符串，并将其转换回Javascript对象。

下面是一个示例，演示了如何从localStorage中获取一个Javascript对象：

const jsonString = localStorage.getItem('myKey');
const myObject = JSON.parse(jsonString);
console.log(myObject.name); // 输出：Alice
console.log(myObject.age); // 输出：25

在上述示例中，我们首先使用localStorage.getItem()方法获取存储在localStorage中以myKey为键值的JSON字符串。接着，我们使用JSON.parse()方法将该字符串转换回Javascript对象，并将其存储在myObject变量中。最后，我们可以像访问普通Javascript对象一样访问其中的属性值。

如何修改Javascript对象

如果要修改存储在localStorage中的Javascript对象，需要先将其检索出，然后再对其进行修改，并将修改后的对象重新存储到localStorage中。

下面是一个示例，演示了如何修改存储在localStorage中的Javascript对象：

const jsonString = localStorage.getItem('myKey');
const myObject = JSON.parse(jsonString);
myObject.age = 26;
const newJsonString = JSON.stringify(myObject);
localStorage.setItem('myKey', newJsonString);

在上述示例中，我们首先使用localStorage.getItem()和JSON.parse()方法获取存储在localStorage中以myKey为键值的JSON字符串，并将其转换回Javascript对象。接着，我们修改了该对象中的age属性，并使用JSON.stringify()方法将其转换回JSON字符串。最后，我们使用localStorage.setItem()方法将修改后的字符串存储回localStorage中。

总结

本文介绍了如何使用localStorage来存储和检索Javascript对象。要存储Javascript对象，需要将其转换为JSON字符串，并使用localStorage.setItem()方法存储。要检索Javascript对象，需要使用localStorage.getItem()方法获取JSON字符串，并使用JSON.parse()方法将其转换回Javascript对象。要修改存储在localStorage中的Javascript对象，需要先将其检索出，然后对其进行修改，并将修改后的对象重新存储到localStorage中。