如何在会话存储中存储对象

在一个 Web 应用程序中，有时需要在不同的页面之间保持一些全局状态，例如用户登录信息、购物车内容等。这时可以使用会话存储（Session Storage）来存储这些数据，使得数据可以在不同页面之间共享，并在用户关闭网页时自动删除。

但是，会话存储仅仅支持存储字符串类型的数据。如果要存储一个对象，需要进行一些转换和序列化工作。

1. 使用 JSON 序列化

一个常见的方法是使用 JSON 序列化将对象转化为字符串，然后再存储在会话存储中。例如，假设有一个名为 user 的对象需要存储，可以执行以下代码：

const user = { name: "Alice", age: 30 };
const userStr = JSON.stringify(user);
sessionStorage.setItem("user", userStr);

这里首先使用 JSON.stringify() 将 user 对象转化为字符串，然后使用 sessionStorage.setItem() 方法将字符串存储到会话存储中。

在读取时，可以使用 JSON.parse() 方法将字符串转化为原来的对象：

const userStr = sessionStorage.getItem("user");
const user = JSON.parse(userStr);

2. 使用一个专门的函数

为了避免在每次存储和读取时都进行序列化和反序列化操作，也可以编写一个专门的函数来进行对象和字符串之间的相互转换。例如，可以编写以下函数：

function setObject(key, obj) {
  const objStr = JSON.stringify(obj);
  sessionStorage.setItem(key, objStr);
}

function getObject(key) {
  const objStr = sessionStorage.getItem(key);
  return JSON.parse(objStr);
}

这样，在存储对象时可以直接调用 setObject()，读取对象时可以直接调用 getObject()，而不必每次都进行序列化和反序列化操作。

总结

在会话存储中存储对象需要进行一些转换和序列化工作。可以使用 JSON 序列化或者编写一个专门的函数来处理这些操作。不过需要注意的是，存储在会话存储中的数据只能在同一个页面之间共享，且用户关闭浏览器后会自动清除，因此不适合用于需要长期保持数据的应用场景。