Cookie使用

介绍两种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'

其中，

1. 不知道大家有没有发现，在存储的cookie的时候比较麻烦，并不是我们之前熟悉的set（key,value）的形式进行存储。
2. 对于删除的时候也是，一定要设置以前的时间才能达到删除的目的。
3. 获取的时候，因为上面的获取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方法来进行转换，这点切记~