给localStorage加上过时时间

1、酷酷的开头

在潜水的时间长达一年以后，我终于鼓起勇气开始写个人第一篇文章了。前端小菜，只是想记录一下本身的想法，望各位看到这文的大佬轻喷。

在如今先后端分离的开发模式下，存储信息通常都不在使用以往使用的cookie了，就拿笔主我以前作过的项目来讲。咱们都是登陆成功了以后后端会返回给我一个token，通常状况下我会将这个token存到localStorage中，后续再每一次请求中都会将这个token携带在请求头中。 至于为何要存到localStorage中呢，相信作过单页web应用的开发者们也知道，若是不存着，那用户刷新了就啥都没有了。

能够见得前端存储在项目中是愈来愈重要了，浏览器给咱们提供了两个存储方案，一个是localStorage，一个是sessionStorage。 存到localStorage中的信息是永久存储,若是用户不手动删除或者代码中没有localStorage.removeItem(xxx)这样的调用那这个信息将永远不会消失; 在sessionStorage中存储的信息则是一次性的，用户关掉网页了下一次在进入这个网页信息就不会再存储了。 可是在实际项目的运用中，这两个方案的表现都不是那么使人满意。就好比说，我想要实现用户登陆以后七天以内不须要再次登陆这样的功能，token生成了以后，后端设置了这个token的过时时间为7天，ok，传到前端， 可是针对浏览器目前提供的存储方案，我却只能选择永久存储和一次性存储。一次性存储确定是不能知足需求的，永久存储也违背了个人意愿。

2、以前在项目中的解决方式

以前我在项目中的作法是，在用localStorage存储了token值的同时， 我还存了一个过时时间（一个毫秒数），而后在项目初始化的时候我就会去检查这个时间看看是否是已经小于当前时间了，若是是就将token删掉。 这样后续项目在使用到这个token的时候token就已经从localStorage中被删掉了。可是这样作也有一个问题，若是打开项目的时间恰好是还有10s token就过时的话，token也不会被删掉了。因而我脑壳里就在构想一个可（垃）靠（圾）的解决方案，一不作，二不休，我把它封装成了一个工具。

先厚脸皮的介绍一下个人项目， sweet-storage, 请无视这土的要死的名字。
github的地址为：https://github.com/Chechengyi/sweet-storage。 顺便也正（卑）大（鄙）光（无）明（耻）的求一波star。

3、提出新的想法

咳咳咳！ 废话很少说了，讲一下个人实现思路。

在遇到有过时时间的存储需求时， 用我这个项目举栗子， storage.save('name', 'chechengyi', 10000) 这行代码的意思是我想在localStorage中存一个键为name，值为chechengyi的信息，我但愿这条信息只存10s，在将信息存入localStorage中的同时，我会把它的过时时间信息以

{
      key: time
  }

的形式也存到localStorage中。 key就是键， time就是这条信息到期的时间。 这里的时间的话应该存的是new Date().getTime()+咱们设置的时间。这样就获得了一个精确的毫秒数了。 这个过时时间信息在个人项目中以ISTORAGE_RECORD的字段存储。 而后后面咱们在根据这里面所提取出来的时间，即：new Date().getTime()-time这个时间去作一个定时器。定时器时间到了就将localStorage中存的信息以及存的时间信息就是那个对象中的key-time删掉就好了。

可是这里也有一个问题，就是。可能咱们须要有过时时间存储的时间不仅有一条啊。难道存了三条我就作三个定时器？存的100条我就作100个定时器？ 这也太low了并且也并不符合实际。因而我左思右想，发现我前几天刚学习的优先队列很适合用在这里。

咱们能够这样作，基于ISTORAGE_RECORD拿出来的对象里的time去作一个最小堆（个人这个优先队列是基于最小堆的），最小堆嘛，根节点确定就是最小的，time最小的那个不就是最早执行的定时器吗？ 等这个定时器执行时就删掉localStorage里存的信息和时间信息，而后优先队列出列，下一个排队等着出列的元素就是下一个时间最近，等着过时的信息了。这里涉及到了最小堆数据结构的操做就很少讲了。有兴趣的同窗能够本身去看看实现。这就是个人项目实现的大概思路， 真正实现的话还要去考虑还没过时就被用户删除了等等的状况。

到这里了我又在想，不行啊，这样过时了也只是“悄悄”的过时了。 我想知道它何时过时的，也就是我但愿它过时的时候能通知我一声行不行啊？ 因而通过我又一轮的左思右想，我发现我去年学的发布-订阅模式能够用到这里。而后就是代码实现啦，无非就是作了一个observers对象。 以存储的key名去订阅了一个事件，在个人项目中就是storage.on('name', (key)=>{}) 而后再定时器执行的时候我会observers.trriger('name')去发布这个事件，而且将须要被删除掉的信息的key传入订阅的函数当中。 这样就作到了通知的功能。具体发布-订阅模式怎么实现的也不在此多作赘述了。

4、无耻的总结

sweet-storage 实现的大概思路就说完了，有兴趣的同窗能够去看看源码实现，在此强调 github的地址为：https://github.com/Chechengyi/sweet-storage。 个人代码写的很通（垃）俗易（圾）懂。

我还将这个项目传到了npm上面， npm install sweet-storage就能够安装到本地。学以至用，这一年多来在各大论坛潜水每次看到别人分享心得内心都痒痒的，此次总算是下定了决心踏出第一步。在这个过程当中也学习到了不少，但愿本身可以坚持下去。

若是有不对的地方但愿朋友们指出，但愿朋友们多给我提建议

最后在强调一波！！！

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

求star 求fuck......