迹忆客 专注技术分享

在 Vue 中，我们通常需要对数据进行持久化，以便在用户刷新页面或者关闭浏览器后，能够保留数据状态。常见的实现方式包括使用 cookie 和 localstorage 。

使用 cookie

cookie 是一种简单的客户端存储方式，可以在客户端存储少量数据。在 Vue 中，可以使用 js-cookie 库来方便地操作 cookie。

首先，需要安装 js-cookie：

$ npm install js-cookie --save

然后，在需要使用 cookie 的组件中，引入 js-cookie：

import Cookies from 'js-cookie'

接下来，可以使用 Cookies.set() 方法来设置 cookie：

Cookies.set('key', 'value', { expires: 7 })

其中，第一个参数是 cookie 名称，第二个参数是 cookie 值，第三个参数是可选的配置项，如过期时间等。

使用 Cookies.get() 方法可以获取 cookie 值：

Cookies.get('key')

使用 Cookies.remove() 方法可以删除 cookie：

Cookies.remove('key')

使用 localstorage

localstorage 是一种在客户端存储较大数据的方式，可以存储多个键值对。在 Vue 中，可以使用 window.localStorage 对象来方便地操作 localstorage。

使用 localstorage 与使用 cookie 类似，首先需要使用 setItem() 方法来设置 localstorage：

window.localStorage.setItem('key', 'value')

使用 getItem() 方法可以获取 localstorage 值：

window.localStorage.getItem('key')

使用 removeItem() 方法可以删除 localstorage：

window.localStorage.removeItem('key')

需要注意的是，localstorage 存储的值必须是字符串类型，如果需要存储对象或数组等非字符串类型的数据，需要使用 JSON.stringify() 方法将其转换为字符串类型，使用 JSON.parse() 方法将其转换回原来的类型。

例如，存储一个对象：

const obj = { name: 'Jack', age: 18 }
window.localStorage.setItem('key', JSON.stringify(obj))

获取该对象：

const objStr = window.localStorage.getItem('key')
const obj = JSON.parse(objStr)

总结

使用 cookie 和 localstorage 都是在客户端进行数据持久化的方式，根据实际需求选择合适的方式。对于需要存储较小数据的场景，使用 cookie 更加方便；对于需要存储较大数据的场景，使用 localstorage 更加合适。在 Vue 中，可以使用 js-cookie 库和 window.localStorage 对象来方便地操作 cookie 和 localstorage。