HTML5 如何在 localstorage 和 sessionstorage 中存储对象？

在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来存储对象时，需要先将对象转换成字符串再存储，读取时再将字符串转换回对象。这样可以保证对象的结构和数据在存储过程中得以保持。