思考點(diǎn)

在 web 開發(fā)中，我們知道 cookie、session、localStorage都可以保存用戶的數(shù)據(jù)，cookie的 domain、path 限制了 cookie 的跨域， 有數(shù)量和大小的限制，可以設(shè)置有效時(shí)間。 session是后臺在瀏覽器注入一個(gè)設(shè)置了 httponly 的不可讀取的 cookie ， session data由后臺保存在數(shù)據(jù)庫或者內(nèi)存中，在web中，session 是靠 cookie 作為唯一標(biāo)示來實(shí)現(xiàn)的，也可以設(shè)置過期時(shí)間。 localStorage 是 H5 的數(shù)據(jù)存儲辦法， 也是有大小限制的，但是不可以設(shè)置過期時(shí)間。

從我們接觸前端起，第一個(gè)熟悉的存儲相關(guān)的Cookie或者來分析我們生活中密切相關(guān)的淘寶、物流、鬧鐘等事物來說起吧，

• Cookie從你設(shè)置的時(shí)候，就會(huì)給個(gè)時(shí)間，不設(shè)置默認(rèn)會(huì)話結(jié)束就過期；
• 淘寶購物 從你下單付款起，就會(huì)給這件貨物設(shè)置一個(gè)收貨期限時(shí)間，過了這個(gè)時(shí)間自動(dòng)認(rèn)為你收貨（即訂單結(jié)束）；
• 鬧鐘 你設(shè)置的提醒時(shí)間，其實(shí)也就是它的過期時(shí)間；
• 再比如與您每天切身相關(guān)的產(chǎn)品需求，過完需求，你給出的上線時(shí)間，也就是這個(gè)需求的過期時(shí)間；
• 再通俗點(diǎn)講，您今年的生日過完到明年生日之間也是相當(dāng)于設(shè)置了有效期時(shí)間；

以上種種，我們能得出一個(gè)結(jié)論任何一件事、一個(gè)行為動(dòng)作，都有一個(gè)時(shí)間、一個(gè)節(jié)點(diǎn)，甚至我們可以黑localStorage，就是一個(gè)完善的API，為什么不能給一個(gè)設(shè)置過期的機(jī)制，因?yàn)閟essionStorage、Cookie并不能滿足我們實(shí)際的需求。

實(shí)現(xiàn)思路

抱歉，黑localStorage不完善，有點(diǎn)夸張了，綜合上述的總結(jié)，問題就簡單了，給localStorage一個(gè)過期時(shí)間，一切就都so easy ？到底是不是，來看看具體的實(shí)現(xiàn)吧：

簡單回顧

//示例一：
localStorage.setItem('test',1234567);
let test = localStorage.getItem('test');
console.log(typeof test, test);

//示例二：
localStorage['name'] = '蘇南';
console.log(localStorage['name']);
/*
輸出:
"1234567" ,'蘇南',
這里要注意，1234567 存進(jìn)去時(shí)是number 取出來就成string了
*/

重寫 set(存入) 方法：

• 首先有三個(gè)參數(shù) key、value、expired ，分別對應(yīng) 鍵、值、過期時(shí)間，
• 過期時(shí)間的單位可以自由發(fā)揮，小時(shí)、分鐘、天都可以，
• 注意點(diǎn)：存儲的值可能是數(shù)組/對象，不能直接存儲，需要轉(zhuǎn)換 JSON.stringify，
• 這個(gè)時(shí)間如何設(shè)置呢？在這個(gè)值存入的時(shí)候在鍵(key)的基礎(chǔ)上擴(kuò)展一個(gè)字段，如：key+'expires'，而它的值為當(dāng)前 時(shí)間戳 + expired過期時(shí)間

具體來看一下代碼 ：

set(key, value, expired) {
 /*
 * set 存儲方法
 * @ param {String} key 鍵
 * @ param {String} value 值，
 * @ param {String} expired 過期時(shí)間，以分鐘為單位，非必須
 * @ 由@IT·平頭哥聯(lián)盟-首席填坑官∙蘇南 分享
 */
 let source = this.source;
 source[key] = JSON.stringify(value);
 if (expired){
 source[`${key}__expires__`] = Date.now() + 1000*60*expired
 };
 return value;
}

重寫 get(獲取) 方法：

• 獲取數(shù)據(jù)時(shí)，先判斷之前存儲的時(shí)間有效期，與當(dāng)前的時(shí)間進(jìn)行對比；
• 但存儲時(shí)expired為非必須參數(shù)，所以默認(rèn)為當(dāng)前時(shí)間+1，即長期有效；
• 如果存儲時(shí)有設(shè)置過期時(shí)間，且在獲取的時(shí)候發(fā)現(xiàn)已經(jīng)小于當(dāng)前時(shí)間戳，則執(zhí)行刪除操作，并返回空值；
• 注意點(diǎn)：存儲的值可能是數(shù)組/對象，取出后不能直接返回，需要轉(zhuǎn)換 JSON.parse，

具體來看一下代碼 ：

get(key) {
 /*
 * get 獲取方法
 * @ param {String} key 鍵
 * @ param {String} expired 存儲時(shí)為非必須字段，所以有可能取不到，默認(rèn)為 Date.now+1
 * @ 由@IT·平頭哥聯(lián)盟-首席填坑官∙蘇南 分享
 */
 const source = this.source,
 expired = source[`${key}__expires__`]||Date.now+1;
 const now = Date.now();

 if ( now >= expired ) {
 this.remove(key);
 return;
 }
 const value = source[key] ? JSON.parse(source[key]) : source[key];
 return value;
}

重寫 remove(刪除) 方法：

刪除操作就簡單了，；

remove(key) {
 const data = this.source,
 value = data[key];
 delete data[key];
 delete data[`${key}__expires__`];
 return value;
}

優(yōu)化點(diǎn)：

• 記得上次有個(gè)同學(xué)，是這么評論的：「 刪除緩存能放到constructor里面執(zhí)行么，放到get里面 不取就一直在那是不是不太好？」；
• 為什么不用for in而是 for ? for in循環(huán)遍歷對象的屬性時(shí)，原型鏈上的所有屬性都將被訪問，解決方案：使用hasOwnProperty方法過濾或Object.keys會(huì)返回自身可枚舉屬性組成的數(shù)組；

class storage {

 constructor(props) {
 this.props = props || {}
 this.source = this.props.source || window.localStorage
 this.initRun();
 }
 initRun(){
 /*
 * set 存儲方法
 * @ param {String} key 鍵
 * @ param {String} value 值，存儲的值可能是數(shù)組/對象，不能直接存儲，需要轉(zhuǎn)換 JSON.stringify
 * @ param {String} expired 過期時(shí)間，以分鐘為單位
 * @ 由@IT·平頭哥聯(lián)盟-首席填坑官∙蘇南 分享
 */
 const reg = new RegExp("__expires__");
 let data = this.source;
 let list = Object.keys(data);
 if(list.length > 0){
 list.map((key,v)=>{
 if( !reg.test(key )){
  let now = Date.now();
  let expires = data[`${key}__expires__`]||Date.now+1;
  if (now >= expires ) {
  this.remove(key);
  };
 };
 return key;
 });
 };
 }
}

總結(jié)：

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論