安裝：
//以下幾種都可以用： 1、引入js-cookie.js 1.直接飲用cdn：<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> 2.本地下載下來后：<script src="/path/to/js.cookie.js"></script> 3.模塊化開發時: import Cookies from 'js-cookie'
一、下載cookie
npm install js-cookie
二、當前頁面引用cookie
import Cookies from "js-cookie";
三、cookie在當前的使用(方法一)
// 組件中使用 // 寫入cookie Cookies.set('name', 'value') // 讀取 Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined // 讀取所有可見的cookie Cookies.get() // 刪除某項cookie值 Cookies.remove('name')
四、cookie在全局使用（方法二）
main.js
import Cookies from 'js-cookie'
五、cookie設置過期時間
//1、存cookie set方法支持的屬性有 ： expires->過期時間 path->設置為指定頁面創建cookie domain-》設置對指定域名及指定域名的子域名可見 secure->值有false和true ,表示設置是否只支持https,默認是false Cookies.set('key', 'value'); //創建簡單的cookie Cookies.set('key', 'value', { expires: 27 });//創建有效期為27天的cookie Cookies.set('key', 'value', { expires: 17, path: '' }); //可以通過配置path,為當前頁創建有效期7天的cookie //2、取cookie Cookies.get('key'); // 獲取指定key 對應的value Cookies.get(); //獲取所有value //3、刪除cookie Cookies.remove('key');//刪除普通的cookie Cookies.remove('name', { path: '' }); // 刪除存了指定頁面path的cookie
注意：如果存的是對象，如： userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo)
取出來的userInfo需要進行JSON的解析,解析為對象：let res = JSON.parse( Cookie.get('userInfo') );
當然你也可以使用：Cookie.getJSON('userInfo');
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }
//-------------------------------------------------------//
Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }
舉例二：
背景：業務需要在前端進行數據的緩存，到期就刪除再進行獲取新數據。
前端設置數據定時失效的可以有下面2種方法：
1、當數據較大時，可以利用localstorage，存數據時候寫入一個時間，獲取的時候再與當前時間進行比較
2、如果數據不超過cookie的限制大小，可以利用cookie比較方便，直接設置有效期即可。
/--------------------------------------------------------------------------------------/
利用localstorage實現：步驟
1.存儲數據時加上時間戳
在項目開發中，我們可以寫一個公用的方法來進行存儲的時候加上時間戳
//export拋出 export function setLocalStorageAndTime (key, value) { window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() })) }
項目中：
存儲、
// 有數據再進行存儲 setLocalStorageAndTime('XXX', {name: 'XXX'})
讀取、
// 判斷是否返回為null或者失效 getLocalStorageAndTime('XXX', 86400000)
獲取數據時與當前時間進行比較、
export function getLocalStorageAndTime (key, exp = 86400000) { // 獲取數據 let data = window.localStorage.getItem(key) if (!data) return null let dataObj = JSON.parse(data) // 與過期時間比較 if (new Date().getTime() - dataObj.time > exp) { // 過期刪除返回null removeLocalStorage(key) console.log('信息已過期') return null } else { return dataObj.data } }
//----------------------------------------------------------------------------------------/
利用cookie實現
js-cookie 的示例中只有以天為單位的有效期：
Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效
官方文檔只要設置天數，沒有時分秒，這樣我們想設置更小單位的時候無法下手，其實也可以設置時間戳來處理時間的，下面這種方式可以設置任意單位的有效期：
let seconds = 10; let expires = new Date(new Date() * 1 + seconds * 1000); Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效
貼上利用js-cookie的封裝, 記得 npm i js-cookie
import Cookies from 'js-cookie' /* * 設置cookies * */ export function getCookies (key) { return Cookies.get(key) } /* * 設置Cookies * */ export function setCookies (key, value, expiresTime) { let seconds = expiresTime let expires = new Date(new Date() * 1 + seconds * 1000) return Cookies.set(key, value, { expires: expires }) } /* * 移除Cookies * */ export function removeCookies (key) { return Cookies.remove(key) }
域domain與路徑path
默認值：
path: ‘/’
前言：
domain表示的是cookie所在的域，默認為請求的地址，如網址為www.jb51.net/test/test.aspx，那么domain默認為www.jb51.net。而跨域訪問，如域A為t1.test.com，域B為t2.test.com，那么在域A生產一個令域A和域B都能訪問的cookie就要將該cookie的domain設置為.test.com；如果要在域A生產一個令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設置為t2.test.com。
path表示cookie所在的目錄，asp.net默認為/，就是根目錄。在同一個服務器上有目錄如下：/test/,/test/cd/,/test/dd/，現設一個cookie1的path為/test/，cookie2的path為/test/cd/，那么test下的所有頁面都可以訪問到cookie1，而/test/和/test/dd/的子頁面不能訪問cookie2。這是因為cookie能讓其path路徑下的頁面訪問。
cookie.set()更多參數
語法：
cookies.set（名稱，[值]，[options]）
更多options的參數配置：
maxAge：一個數字，表示自Date.now()到期起的毫秒數
expires：一個Date對象，指示cookie的過期日期（默認在會話結束時過期）。默認：天
path：一個字符串，指示cookie的路徑（/默認情況下）。
domain：一個字符串，指示cookie的域（無默認值）。
secure：一個布爾值，指示cookie是否僅通過HTTPS發送（false默認情況下，對於HTTP，true默認情況下，對於HTTPS）。在下面閱讀有關此選項的更多信息。
httpOnly：一個布爾值，指示cookie是否僅通過HTTP（S）發送，並且不提供給客戶端JavaScript（true默認情況下）。
sameSite：布爾值或字符串，指示cookie是“相同站點” cookie（false默認情況下）。可以將其設置為’strict’，‘lax’或true（映射到’strict’）。
signed：一個布爾值，指示是否要對cookie進行簽名（false默認情況下）。如果為真，.sig則還將發送另一個具有后綴的同名Cookie，其27字節的url安全base64 SHA1值表示針對第一個Keygrip密鑰的cookie-name = cookie-value的哈希值。此簽名密鑰用於檢測下次接收cookie時的篡改。
overwrite：一個布爾值，指示是否覆蓋以前設置的同名Cookie（false默認情況下）。如果是這樣，則在設置此Cookie時，將從相同名稱的同一個請求中設置的所有Cookie（無論路徑或域如何）都從Set-Cookie標頭中過濾掉。