JS設(shè)置緩存和緩存過期時間的操作方法
js-cookie用法詳解
1. 安裝
npm install js-cookie import Cookies from "js-cookie";
2. 引入
import Cookies from "js-cookie";
3. 使用
(1)cookie在當前組件的使用
// 寫入cookie
Cookies.set('name', 'value')
// 讀取
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
// 讀取所有可見的cookie
Cookies.get()
// 刪除某項cookie值
Cookies.remove('name')(2)cookie在全局使用
在main.js引入 import Cookies from "js-cookie";
4. 設(shè)置過期時間
//1、存cookie
/*
set方法支持的屬性有 : expires->過期時間
path->設(shè)置為指定頁面創(chuàng)建cookie
domain-》設(shè)置對指定域名及指定域名的子域名可見
secure->值有false和true,表示設(shè)置是否只支持https,默認是false
*/
//創(chuàng)建簡單的cookie
Cookies.set('key', 'value');
//創(chuàng)建有效期為27天的cookie
Cookies.set('key', 'value', { expires: 27 });
//可以通過配置path,為當前頁創(chuàng)建有效期7天的cookie
Cookies.set('key', 'value', { expires: 17, path: '' });
//2、取cookie
// 獲取指定key 對應(yīng)的value
Cookies.get('key');
//獲取所有value
Cookies.get();
//3、刪除cookie
//刪除普通的cookie
Cookies.remove('key');
// 刪除存了指定頁面path的cookie
Cookies.remove('name', { path: '' });注意:如果存的是對象,如: userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo)
取出來的userInfo需要進行JSON的解析,解析為對象:let res = JSON.parse( Cookie.get('userInfo') );
當然你也可以使用:Cookie.getJSON('userInfo');
Cookies.get('name'); // => '{"myName":"bo"}'
Cookies.get(); // => { name: '{"myName":"bo"}' }
//-------------------------------------------------------//
Cookies.getJSON('name'); // => { myName: 'bo' }
Cookies.getJSON(); // => { name: { myName: 'bo' } }使用場景
業(yè)務(wù)需要在前端進行數(shù)據(jù)的緩存,到期就刪除再進行獲取新數(shù)據(jù)。
前端設(shè)置數(shù)據(jù)定時失效的可以有下面2種方法:
1、當數(shù)據(jù)較大時,可以利用localstorage,存數(shù)據(jù)時候?qū)懭胍粋€時間,獲取的時候再與當前時間進行比較
2、如果數(shù)據(jù)不超過cookie的限制大小,可以利用cookie比較方便,直接設(shè)置有效期即可。
1. 使用 localstorage
(1)設(shè)置過期時間
在存儲時加上時間戳,可以寫個公共方法
//export拋出
export function setLocalStorageAndTime (key, value) {
window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}獲取時與當前時間戳進行比較
export function getLocalStorageAndTime (key, exp = 86400000) {
// 獲取數(shù)據(jù)
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
}
}(2)使用方法
存儲
setLocalStorageAndTime('XXX', {name: 'XXX'})
判斷是否返回為null或者失效
getLocalStorageAndTime('XXX', 86400000)1. 使用 cookie
js-cookie 的示例中只有以天為單位的有效期:
Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效官方只支持天數(shù),封裝一下支持時分秒
let seconds = 10;
let expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效封裝
import Cookies from 'js-cookie'
/*
* 設(shè)置cookies
* */
export function getCookies (key) {
return Cookies.get(key)
}
/*
* 設(shè)置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)
}ps: cookie.set()更多參數(shù)
語法: cookies.set(名稱,[值],[options])
更多options的參數(shù)配置:
maxAge:一個數(shù)字,表示自Date.now()到期起的毫秒數(shù) expires:一個Date對象,指示cookie的過期日期(默認在會話結(jié)束時過期)。默認:天 path:一個字符串,指示cookie的路徑(/默認情況下)。 domain:一個字符串,指示cookie的域(無默認值)。 secure:一個布爾值,指示cookie是否僅通過HTTPS發(fā)送 (false默認情況下,對于HTTP,true默認情況下,對于HTTPS)。在下面閱讀有關(guān)此選項的更多信息。 httpOnly:一個布爾值,指示cookie是否僅通過HTTP(S)發(fā)送, 并且不提供給客戶端JavaScript(true默認情況下)。 sameSite:布爾值或字符串,指示cookie是“相同站點” cookie(false默認情況下)。 可以將其設(shè)置為'strict',‘lax'或true(映射到'strict')。 signed:一個布爾值,指示是否要對cookie進行簽名(false默認情況下)。 如果為真,.sig則還將發(fā)送另一個具有后綴的同名Cookie, 其27字節(jié)的url安全base64 SHA1值表示針對第一個Keygrip密鑰的cookie-name=cookie-value的哈希值。 此簽名密鑰用于檢測下次接收cookie時的篡改。 overwrite:一個布爾值,指示是否覆蓋以前設(shè)置的同名Cookie(false默認情況下)。 如果是這樣,則在設(shè)置此Cookie時,將從相同名稱的同一個請求中設(shè)置的所有Cookie (無論路徑或域如何)都從Set-Cookie標頭中過濾掉。
到此這篇關(guān)于JS設(shè)置緩存和緩存過期時間的文章就介紹到這了,更多相關(guān)js設(shè)置緩存和緩存過期時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript Event學(xué)習(xí)補遺 addEventSimple
這里有個addEventSimple和removeEventSimple函數(shù),有時候需要不那么顯眼的事件處理程序的時候我就用這兩個函數(shù)注冊。2010-02-02
js document.getElementsByClassName的使用介紹與自定義函數(shù)
今天在增加一個功能的時候需要用到getElementsByClassName(),getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持,那么就需要下面的方法解決了2016-11-11
基于aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人功能
這篇文章主要介紹了利用aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05

