介紹兩種cookie的使用方法
- 原生cookie
- js-cookie插件
區(qū)別
js-cookie插件將原生cookie進(jìn)行了封裝，提供了方便的api研儒，用起來更爽豫缨。
使用
原生cookie使用
// 存儲
document.cookie = "username = cc"
// 獲取，字符串形式返回
document.cookie // 獲取整個cookie（所有名/值對端朵，以‘;’隔開）
// 修改（跟存儲有點像好芭，但是設(shè)置的是舊值，cookie會自動識別冲呢，進(jìn)行修改舍败，而不是創(chuàng)建）
document.cookie = 'username = aa' // 如此就可以將之前的cc，修改為aa
// 設(shè)置過期時間以及保存路徑（默認(rèn)關(guān)閉時刪除敬拓，路徑默認(rèn)當(dāng)前頁面）
document.cookie = 'expires=Thu, 18 Dec 2043 12:00:00 GMT;path=/'
// 刪除（第一個為你需要刪除的屬性值邻薯，然后設(shè)置過期的時間（過去的時間），默認(rèn)就是刪除）
// 譬如要刪除cookie中的token乘凸，token不一定為0厕诡，無所謂，反正都是刪除
document.cookie = 'token=0;expires=Thu, 01 Jan 1970 00:00:00 GMT'
其中营勤，
- 不知道大家有沒有發(fā)現(xiàn)灵嫌，在存儲的cookie的時候比較麻煩，并不是我們之前熟悉的set（key,value）的形式進(jìn)行存儲葛作。
- 對于刪除的時候也是寿羞，一定要設(shè)置以前的時間才能達(dá)到刪除的目的。
- 獲取的時候进鸠，因為上面的獲取cookie的方法只能返回所有的名/值對稠曼，如果我需要獲取某個key，對應(yīng)的value時，就會很麻煩霞幅。我們只能通過split(';')將所有的名/值對解析出來漠吻，再一個個查找。
js-cookie使用
作用：為了解決上面的麻煩與不爽司恳，js-cookie很好地解決了這個問題途乃。
// 安裝
npm i js-cookie --save
// 引用
import cookies from 'js-cookie'
// 存儲(value值可以直接存對象，但是取出來是字符串扔傅，需要JSON.parse進(jìn)行轉(zhuǎn)換)
cookies.set('name','cc')
// 設(shè)置過期時間和路徑
cookies.set('name','cc',{expires:4,path: ''}) // 4代表4天
// 獲取
cookies.get('name') // 沒有找到則返回undefined
// 獲取全部值
cookies.get() // {name: 'cc'}
// 刪除
cookies.remove('name')
Cookies.remove('name');
//如果值設(shè)置了路徑耍共，那么不能用簡單的delete方法刪除值，需要在delete時指定路徑
Cookies.remove('name', 'value', { path: '' });
Cookies.remove('name'); // 刪除失敗
Cookies.remove('name', { path: '' }); // 刪除成功
//注意猎塞，刪除不存在的cookie不會報錯也不會有返回
一般來說试读，我們存儲對象的機(jī)會會比較多點，舉個栗子：
const user = {
name: 'lia',
age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))
對于這個栗子還有啰嗦兩句荠耽，
通過set方法可以將value值設(shè)置為對象钩骇，存進(jìn)去之后，由于cookie本身的機(jī)制（只能存字符串）铝量，所以我們通過get方法拿出來時倘屹，它其實是字串格式的，需要通過JSON.parse方法來進(jìn)行轉(zhuǎn)換慢叨，這點切記~
