js-cookie 主要是方便我们操作cookie的存储,简单好用,接下来就看一下 js-cookie 的使用方法
我们都知道平时使用 cookie 进行缓存时,主要以 储存、获取、删除 三种方式,js-cookie也是如此,避免了像原生操作 cookie 的繁琐
原生js操作cookie的麻烦
首先我们要安装一下 js-cookie
npm install --save js-cookie
安装成功后,需要在用到的文件中调用
import Cookies from 'js-cookie'
接下来就可以使用了
方法一:储存(set)
// 先开始一个简单的例子 Cookies.set('user', '咸蛋君', { expires: 3, path: '' }); // 创建一个有效的cookie这时你就会在控制台cookies里就有个name为user这个字段了,而它的value是咸蛋君 Cookies.set('user', '咸蛋君', { expires: 3 }); // 创建一个从现在起3天过期的cookie Cookies.set('user', '咸蛋君', { expires: 3, path: '' }); // 创建对当前页面路径有效的3天过期cookie // 接下来储存一个对象 const res = { user: '咸蛋君', age: 18 }; Cookies.set('data', res); // 同样这时控制台cookies里又出现一个name为data的字段而它的value是一个对象
方法二:获取(get)
// 现在来获取刚才储存的数据 const user = Cookies.get('user') // console.log(Cookies.get('user')) // 咸蛋君 // 接下来获取刚才储存的对象 const res = JSON.parse(Cookies.get('data')) // 注意 如果不添加想要获取的name时会给你返回cookies里面所有的数据 // console.log(res) // => { uesr: '咸蛋君', ags: 18}
方法三:删除(remove)
Cookies.remove('user'); // 删除cookie里name为user的数据 Cookies.remove('user', { path: '' }); // 删除对当前页面路径有效的cookie