介绍两种cookie的使用方法
- 原生cookie
- js-cookie插件
区别
js-cookie插件将原生cookie进行了封装，提供了方便的api，用起来更爽。
使用
原生cookie使用
// 存储
document.cookie = "username = cc"
// 获取，字符串形式返回
document.cookie // 获取整个cookie（所有名/值对，以‘;’隔开）
// 修改（跟存储有点像，但是设置的是旧值，cookie会自动识别，进行修改，而不是创建）
document.cookie = 'username = aa' // 如此就可以将之前的cc，修改为aa
// 设置过期时间以及保存路径（默认关闭时删除，路径默认当前页面）
document.cookie = 'expires=Thu, 18 Dec 2043 12:00:00 GMT;path=/'
// 删除（第一个为你需要删除的属性值，然后设置过期的时间（过去的时间），默认就是删除）
// 譬如要删除cookie中的token，token不一定为0，无所谓，反正都是删除
document.cookie = 'token=0;expires=Thu, 01 Jan 1970 00:00:00 GMT'
其中，
- 不知道大家有没有发现，在存储的cookie的时候比较麻烦，并不是我们之前熟悉的set（key,value）的形式进行存储。
- 对于删除的时候也是，一定要设置以前的时间才能达到删除的目的。
- 获取的时候，因为上面的获取cookie的方法只能返回所有的名/值对，如果我需要获取某个key，对应的value时，就会很麻烦。我们只能通过split(';')将所有的名/值对解析出来，再一个个查找。
js-cookie使用
作用：为了解决上面的麻烦与不爽，js-cookie很好地解决了这个问题。
// 安装
npm i js-cookie --save
// 引用
import cookies from 'js-cookie'
// 存储(value值可以直接存对象，但是取出来是字符串，需要JSON.parse进行转换)
cookies.set('name','cc')
// 设置过期时间和路径
cookies.set('name','cc',{expires:4,path: ''}) // 4代表4天
// 获取
cookies.get('name') // 没有找到则返回undefined
// 获取全部值
cookies.get() // {name: 'cc'}
// 删除
cookies.remove('name')
Cookies.remove('name');
//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.remove('name', 'value', { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', { path: '' }); // 删除成功
//注意，删除不存在的cookie不会报错也不会有返回
一般来说，我们存储对象的机会会比较多点，举个栗子：
const user = {
name: 'lia',
age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))
对于这个栗子还有啰嗦两句，
通过set方法可以将value值设置为对象，存进去之后，由于cookie本身的机制（只能存字符串），所以我们通过get方法拿出来时，它其实是字串格式的，需要通过JSON.parse方法来进行转换，这点切记~
网友评论