在HTML5中，`localStorage` 和 `sessionStorage` 可以用来在用户浏览器中存储键值对信息。这两者的主要区别在于数据的持久性和作用域：

- `localStorage` 中的数据会被长期存储，直到主动清除，即使浏览器关闭也依然保留。
- `sessionStorage` 中的数据只在当前的浏览器会话期间有效，关闭浏览器标签或窗口后数据将被清除。

但是，需要注意的是`localStorage`和`sessionStorage`只能直接存储字符串。如果希望存储对象，需要先将对象转化为JSON字符串格式。

下面是存储对象的步骤：

1. 首先，创建一个对象。
2. 使用`JSON.stringify()`方法将对象转换成一个JSON字符串。
3. 使用`localStorage.setItem()`或`sessionStorage.setItem()`方法来存储字符串。

下面是一个具体的例子：

```javascript
// 假设我们有一个要存储的对象
var user = {
  name: "张三",
  age: 30
};

// 将对象转换为JSON字符串
var userString = JSON.stringify(user);

// 存储到localStorage
localStorage.setItem('user', userString);

// 存储到sessionStorage
sessionStorage.setItem('user', userString);
```

在需要读取存储的对象时，可以按照以下步骤进行：

1. 使用`localStorage.getItem()`或`sessionStorage.getItem()`方法来获取存储的字符串。
2. 使用`JSON.parse()`方法将JSON字符串转换回对象。

以下是读取存储对象的例子：

```javascript
// 从localStorage中读取字符串
var storedUserString = localStorage.getItem('user');

// 将字符串转换回对象
var storedUser = JSON.parse(storedUserString);

// 现在storedUser就是之前存储的对象
console.log(storedUser.name); // 输出："张三"
```

同样的步骤也适用于`sessionStorage`。

总结一下，在使用HTML5的Web存储API来存储对象时，需要先将对象转换成字符串再存储，读取时再将字符串转换回对象。这样可以保证对象的结构和数据在存储过程中得以保持。

How to store objects in html5 localstorage sessionstorage

1个答案

你的答案