vue里面localstorage存储数组怎么保存到列表
时间: 2024-05-09 07:14:50 浏览: 8
在 Vue 中,可以通过 `JSON.parse()` 和 `JSON.stringify()` 方法将数组存储到 localStorage 中,并在组件中使用 `v-for` 指令将其渲染为列表。
首先,将数组转为 JSON 字符串并存储到 localStorage 中:
```javascript
// 存储到 localStorage
localStorage.setItem('myArray', JSON.stringify(['item1', 'item2', 'item3']));
```
然后,在 Vue 组件中,可以使用 `computed` 属性将 localStorage 中的数据取出并转为数组:
```vue
<template>
<div>
<ul>
<li v-for="item in myArray" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
myArray() {
// 从 localStorage 中取出数据并转为数组
return JSON.parse(localStorage.getItem('myArray')) || [];
}
}
}
</script>
```
这样,就可以在页面上渲染出列表。注意,在使用 `JSON.parse()` 方法时,需要处理 localStorage 中可能为空的情况,避免出现类型错误。