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