vue中用sessionStorage储存数组
时间: 2024-07-12 16:00:51 浏览: 91
vue踩坑记录之数组定义和赋值问题
在 Vue 中,你可以使用浏览器的 `sessionStorage` API 来存储数组数据。`sessionStorage` 是一种持久化的本地存储,数据会一直保留到用户关闭浏览器窗口。下面是将数组存储和检索的基本步骤:
1. 存储数组:
```javascript
// 假设有一个名为 'myArray' 的 Vue 实例中的数组
let myVueArray = ['item1', 'item2', 'item3'];
// 使用 sessionStorage 存储数组
Vue.prototype.$setSessionStorage('myArrayKey', JSON.stringify(myVueArray));
```
这里我们先将数组转换为字符串(因为 `sessionStorage` 只能存储字符串),然后使用 `JSON.stringify()` 进行序列化。
2. 从 sessionStorage 获取数组:
```javascript
// 在需要的地方获取并解码存储的数组
const storedArrayString = sessionStorage.getItem('myArrayKey');
if (storedArrayString) {
let restoredArray = JSON.parse(storedArrayString);
// 将解析后的数组赋值给 Vue 实例或变量
this.myVueArray = restoredArray;
}
```
记得在使用之前检查 `storedArrayString` 是否存在,并且使用 `JSON.parse()` 将字符串转换回原始 JavaScript 对象。
阅读全文