摘要：定時(shí)器時(shí)間到了就將中存的信息以及存的時(shí)間信息就是那個(gè)對(duì)象中的刪掉就行了。難道存了三條我就做三個(gè)定時(shí)器存的條我就做個(gè)定時(shí)器這也太了而且也并不符合實(shí)際。

一、酷酷的開(kāi)頭

在潛水的時(shí)間長(zhǎng)達(dá)一年之后，我終于鼓起勇氣開(kāi)始寫(xiě)我的第一篇文章了。前端小菜，只是想記錄一下自己的想法，望各位看到這文的大佬輕噴。

在現(xiàn)在前后端分離的開(kāi)發(fā)模式下，存儲(chǔ)信息一般都不在使用以往使用的cookie了，就拿筆主我之前做過(guò)的項(xiàng)目來(lái)說(shuō)。我們都是登錄成功了之后后端會(huì)返回給我一個(gè)token，一般情況下我會(huì)將這個(gè)token存到localStorage中，后續(xù)再每一次請(qǐng)求中都會(huì)將這個(gè)token攜帶在請(qǐng)求頭中。 至于為什么要存到localStorage中呢，相信做過(guò)單頁(yè)web應(yīng)用的開(kāi)發(fā)者們也知道，如果不存著，那用戶(hù)刷新了就啥都沒(méi)有了。

可以見(jiàn)得前端存儲(chǔ)在項(xiàng)目中是越來(lái)越重要了，瀏覽器給我們提供了兩個(gè)存儲(chǔ)方案，一個(gè)是localStorage，一個(gè)是sessionStorage。 存到localStorage中的信息是永久存儲(chǔ),如果用戶(hù)不手動(dòng)刪除或者代碼中沒(méi)有localStorage.removeItem(xxx)這樣的調(diào)用那這個(gè)信息將永遠(yuǎn)不會(huì)消失; 在sessionStorage中存儲(chǔ)的信息則是一次性的，用戶(hù)關(guān)掉網(wǎng)頁(yè)了下一次在進(jìn)入這個(gè)網(wǎng)頁(yè)信息就不會(huì)再存儲(chǔ)了。 但是在實(shí)際項(xiàng)目的運(yùn)用中，這兩個(gè)方案的表現(xiàn)都不是那么令人滿(mǎn)意。就比如說(shuō)，我想要實(shí)現(xiàn)用戶(hù)登錄之后七天之內(nèi)不需要再次登錄這樣的功能，token生成了之后，后端設(shè)置了這個(gè)token的過(guò)期時(shí)間為7天，ok，傳到前端， 但是針對(duì)瀏覽器目前提供的存儲(chǔ)方案，我卻只能選擇永久存儲(chǔ)和一次性存儲(chǔ)。一次性存儲(chǔ)肯定是不能滿(mǎn)足需求的，永久存儲(chǔ)也違背了我的意愿。

之前我在項(xiàng)目中的做法是，在用localStorage存儲(chǔ)了token值的同時(shí)， 我還存了一個(gè)過(guò)期時(shí)間（一個(gè)毫秒數(shù)），然后在項(xiàng)目初始化的時(shí)候我就會(huì)去檢查這個(gè)時(shí)間看看是不是已經(jīng)小于當(dāng)前時(shí)間了，如果是就將token刪掉。 這樣后續(xù)項(xiàng)目在使用到這個(gè)token的時(shí)候token就已經(jīng)從localStorage中被刪掉了。但是這樣做也有一個(gè)問(wèn)題，如果打開(kāi)項(xiàng)目的時(shí)間剛好是還有10s token就過(guò)期的話，token也不會(huì)被刪掉了。于是我腦袋里就在構(gòu)想一個(gè)可（垃）靠（圾）的解決方案，一不做，二不休，我把它封裝成了一個(gè)工具。

先厚臉皮的介紹一下我的項(xiàng)目， sweet-storage, 請(qǐng)無(wú)視這土的要死的名字。
github的地址為：https://github.com/Chechengyi/sweet-storage。 順便也正（卑）大（鄙）光（無(wú)）明（恥）的求一波star。

咳咳咳！ 廢話不多說(shuō)了，講一下我的實(shí)現(xiàn)思路。

在遇到有過(guò)期時(shí)間的存儲(chǔ)需求時(shí)， 用我這個(gè)項(xiàng)目舉栗子， storage.save("name", "chechengyi", 10000) 這行代碼的意思是我想在localStorage中存一個(gè)鍵為name，值為chechengyi的信息，我希望這條信息只存10s，在將信息存入localStorage中的同時(shí)，我會(huì)把它的過(guò)期時(shí)間信息以

  {
      key: time
  }

的形式也存到localStorage中。 key就是鍵， time就是這條信息到期的時(shí)間。 這里的時(shí)間的話應(yīng)該存的是new Date().getTime()+我們?cè)O(shè)置的時(shí)間。這樣就得到了一個(gè)精確的毫秒數(shù)了。 這個(gè)過(guò)期時(shí)間信息在我的項(xiàng)目中以ISTORAGE_RECORD的字段存儲(chǔ)。 然后后面我們?cè)诟鶕?jù)這里面所提取出來(lái)的時(shí)間，即：new Date().getTime()-time這個(gè)時(shí)間去做一個(gè)定時(shí)器。定時(shí)器時(shí)間到了就將localStorage中存的信息以及存的時(shí)間信息就是那個(gè)對(duì)象中的key-time刪掉就行了。

但是這里也有一個(gè)問(wèn)題，就是?？赡芪覀冃枰羞^(guò)期時(shí)間存儲(chǔ)的時(shí)間不只有一條啊。難道存了三條我就做三個(gè)定時(shí)器？存的100條我就做100個(gè)定時(shí)器？ 這也太low了而且也并不符合實(shí)際。于是我冥思苦想，發(fā)現(xiàn)我前幾天剛學(xué)習(xí)的優(yōu)先隊(duì)列很適合用在這里。

我們可以這樣做，基于ISTORAGE_RECORD拿出來(lái)的對(duì)象里的time去做一個(gè)最小堆（我的這個(gè)優(yōu)先隊(duì)列是基于最小堆的），最小堆嘛，根節(jié)點(diǎn)肯定就是最小的，time最小的那個(gè)不就是最先執(zhí)行的定時(shí)器嗎？ 等這個(gè)定時(shí)器執(zhí)行時(shí)就刪掉localStorage里存的信息和時(shí)間信息，然后優(yōu)先隊(duì)列出列，下一個(gè)排隊(duì)等著出列的元素就是下一個(gè)時(shí)間最近，等著過(guò)期的信息了。這里涉及到了最小堆數(shù)據(jù)結(jié)構(gòu)的操作就不多講了。有興趣的同學(xué)可以自己去看看實(shí)現(xiàn)。這就是我的項(xiàng)目實(shí)現(xiàn)的大概思路， 真正實(shí)現(xiàn)的話還要去考慮還沒(méi)過(guò)期就被用戶(hù)刪除了等等的情況。

到這里了我又在想，不行啊，這樣過(guò)期了也只是“悄悄”的過(guò)期了。 我想知道它什么時(shí)候過(guò)期的，也就是我希望它過(guò)期的時(shí)候能通知我一聲行不行啊？ 于是經(jīng)過(guò)我又一輪的冥思苦想，我發(fā)現(xiàn)我去年學(xué)的發(fā)布-訂閱模式可以用到這里。然后就是代碼實(shí)現(xiàn)啦，無(wú)非就是做了一個(gè)observers對(duì)象。 以存儲(chǔ)的key名去訂閱了一個(gè)事件，在我的項(xiàng)目中就是storage.on("name", (key)=>{}) 然后再定時(shí)器執(zhí)行的時(shí)候我會(huì)observers.trriger("name")去發(fā)布這個(gè)事件，并且將需要被刪除掉的信息的key傳入訂閱的函數(shù)當(dāng)中。 這樣就做到了通知的功能。具體發(fā)布-訂閱模式怎么實(shí)現(xiàn)的也不在此多做贅述了。

sweet-storage 實(shí)現(xiàn)的大概思路就說(shuō)完了，有興趣的同學(xué)可以去看看源碼實(shí)現(xiàn)，在此強(qiáng)調(diào) github的地址為：https://github.com/Chechengyi/sweet-storage。 我的代碼寫(xiě)的很通（垃）俗易（圾）懂。

我還將這個(gè)項(xiàng)目傳到了npm上面， npm install sweet-storage就可以安裝到本地。學(xué)以致用，這一年多來(lái)在各大論壇潛水每次看到別人分享心得心里都癢癢的，這次總算是下定了決心踏出第一步。在這個(gè)過(guò)程中也學(xué)習(xí)到了很多，希望自己能夠堅(jiān)持下去。

如果有不對(duì)的地方希望朋友們指出，希望朋友們多給我提建議

最后在強(qiáng)調(diào)一波?。?！

github的地址為：https://github.com/Chechengyi/sweet-storage。

求star 求fuck......