vue3 sessionstorage存储数据

可以使用以下代码实现：

// 存储数据
sessionStorage.setItem('key', JSON.stringify(data));

// 获取数据
const storedData = sessionStorage.getItem('key');
const data = JSON.parse(storedData);

相关问题

vue中用sessionStorage储存数组

在 Vue 中，你可以使用浏览器的 `sessionStorage` API 来存储数组数据。`sessionStorage` 是一种持久化的本地存储，数据会一直保留到用户关闭浏览器窗口。下面是将数组存储和检索的基本步骤：

1. 存储数组：

// 假设有一个名为 'myArray' 的 Vue 实例中的数组
let myVueArray = ['item1', 'item2', 'item3'];

// 使用 sessionStorage 存储数组
Vue.prototype.$setSessionStorage('myArrayKey', JSON.stringify(myVueArray));

这里我们先将数组转换为字符串（因为 `sessionStorage` 只能存储字符串），然后使用 `JSON.stringify()` 进行序列化。

2. 从 sessionStorage 获取数组：

// 在需要的地方获取并解码存储的数组
const storedArrayString = sessionStorage.getItem('myArrayKey');
if (storedArrayString) {
  let restoredArray = JSON.parse(storedArrayString);
  // 将解析后的数组赋值给 Vue 实例或变量
  this.myVueArray = restoredArray;
}

记得在使用之前检查 `storedArrayString` 是否存在，并且使用 `JSON.parse()` 将字符串转换回原始 JavaScript 对象。

vue中用sessionStorage储存对象

在 Vue 中，如果你想将对象存储在浏览器的 sessionStorage 中，你可以这样做：

首先，确保你在处理对象时将其序列化为字符串，因为 sessionStorage 只能存储字符串类型的数据。Vue 提供了 `JSON.stringify()` 和 `JSON.parse()` 方法来进行 JSON 数据的转换。

// 创建或更新对象并序列化
const myObject = { key: 'value', anotherKey: 'anotherValue' };
let serializedData = JSON.stringify(myObject);

// 存储到 sessionStorage
window.sessionStorage.setItem('myDataKey', serializedData);

当需要从 sessionStorage 中恢复对象时，你需要先读取数据然后反序列化：

// 从 sessionStorage 读取数据
const storedData = window.sessionStorage.getItem('myDataKey');

// 反序列化数据
if (storedData) {
  const deserializedObject = JSON.parse(storedData);
  // 现在你可以使用 deserializedObject 对象了
}

记得在 Vue 组件的生命周期钩子（如 `beforeDestroy`）中清理 session data，避免造成不必要的存储：

beforeDestroy() {
  window.sessionStorage.removeItem('myDataKey');
}