vue 把接受过来的数据存储到本地 在调用
时间: 2024-02-16 18:04:29 浏览: 23
如果你想将接收到的数据存储到本地,以便在用户关闭浏览器后依然可以使用该数据,可以使用浏览器提供的 `localStorage` 或 `sessionStorage` 对象来实现。
`localStorage` 和 `sessionStorage` 都可以用来存储字符串类型的数据,但二者的区别在于:
- `localStorage` 存储的数据没有过期时间,除非用户手动清除,否则数据将一直保存在浏览器中;
- `sessionStorage` 存储的数据仅在当前会话(即浏览器窗口或标签页)关闭前有效,关闭后数据将被清除。
下面是一个将接收到的数据存储到 `localStorage` 中的示例代码:
```
mounted() {
// 假设从后端接收到的数据为 data
localStorage.setItem('receivedData', JSON.stringify(data))
}
```
在上面的代码中,我们使用 `localStorage` 的 `setItem` 方法将接收到的数据存储到名为 `receivedData` 的键中。需要注意的是,`localStorage` 只能存储字符串类型的数据,因此我们需要使用 `JSON.stringify` 将数据转换为字符串类型。
在需要使用这个数据时,我们可以使用 `localStorage` 的 `getItem` 方法获取数据,并使用 `JSON.parse` 将字符串类型的数据解析为对象:
```
created() {
const receivedData = localStorage.getItem('receivedData')
if (receivedData) {
this.receivedData = JSON.parse(receivedData)
}
}
```
在上面的代码中,我们首先使用 `localStorage` 的 `getItem` 方法获取名为 `receivedData` 的键对应的值,如果值存在,则使用 `JSON.parse` 将字符串类型的数据解析为对象,并存储到 Vue 实例的 `receivedData` 属性中。
需要注意的是,由于 `localStorage` 存储的数据仅限于当前域名下的页面可以访问,因此如果你需要在多个域名下使用同一个数据,可以考虑使用第三方库或服务来实现。