Localstorage

这个主题实际上是在最后一个分享＆lt; 小程序填写在坑中＆gt;中提到的。已经说过了（大可以绕过哦〜），但后来有些人在小组/评论中提到了一些问题，询问是否单独组织更详细的分享，解释细节并改善提到的不足，如果你有以下内容。

　　「 用心分享 做有温度的攻城狮，我是苏南，让我们一起共同成长。 」

从前端思考，第一个熟悉存储相关的cookie或分析密切相关的淘宝，物流，闹钟等生活中的事物，

- cookie将从您设置的时间开始给出，如果您没有设置默认会话，它将过期;

淘宝购物将在您下订单时为此商品设定交货截止日期。在此之后，您将自动认为您正在收货（即订单已经结束）;

- 闹钟您设置的提醒时间实际上是其到期时间;

- 例如，产品要求与您的日常生活相关，在需求完成后，您提供的在线时间，即此需求的到期时间;

- 同样，您的生日和下一个生日之间的差异相当于设置到期日期;

综上所述，我们可以得出结论，任何一件事，一件行为动作，都有时间，一个节点，甚至我们可以黑色localStorage，是一个不完善的API，为什么我们不能给出一个设置到期的机制？ sessionStorage，Cookies不符合我们的实际需求。

对不起执行，黑色localStorage并不完美，有点夸张，以上总结，问题很简单，给localStorage一个到期时间，一切都那么容易？最后，让我们看一下具体的实现：

简要回顾//示例1：localStorage.setItem（'test'，1234567）; let test=localStorage.getItem（'test'）; console.log（typeof test，test）; //例2：localStorage ['name']='苏南'; console.log（localStorage ['name']）;/*输出:'1234567'，'苏南'，这里要注意，1234567存储的数字是取出来的字符串*/

　　重写 set(存入) 方法：- 首先有三个参数 key、value、expired ，分别对应 键、值、过期时间，

- 可以自由播放有效期的单位，小时，分钟，天都可以，

- 注意：存储的值可能是数组/对象，不能直接存储，需要转换为JSON.stringify，

- 如何设定这个时间？存储该值时，根据键扩展字段，例如：key +'expires'，其值为当前时间戳+过期到期时间

- 看看代码：

设置（键，值，过期）{/* *设置存储方法* @param {String}键值* @param {String}值值，* @ param {String}过期到期时间，以分钟为单位，不需要* @ @ @··········__ expires _`]=Date.now（）+ 1000 * 60 * expired};返回值;}

重写get方法： - 获取数据时，首先确定先前存储时间的时间段，并将其与当前时间进行比较;

但是，过期的参数在存储时是非必要的，因此默认值是当前时间+1，它长时间有效;

- 如果存储器中设置了到期时间并且在获取时发现它小于当前时间戳，则执行删除操作并返回空值;

- 注意：存储的值可以是数组/对象。获取后无法直接返回。您需要转换JSON.parse，

- 看看代码：

Get（key）{/* * get get method * @param {String} key key * @param {String} expired在存储时是非必要字段，因此可能不会被采用，默认为Date.now + 1 * @ by @ IT·平头哥联盟 - 填写苏南官邸*/const source=this.source，expired=source [`$ {key} __ expires__`] || Date.now + 1; const now=Date.now（）; if（now＆gt;=expired）{this.remove（key）;返回; } const value=source [key]？ JSON.parse（source [key]）: source [key];返回值;}

重写删除方法： - 删除操作很简单，直接删除键;

删除（键）{const data=this.source，value=data [key];删除数据[key];删除数据[`$ {key} __ expires__`];返回值;}

优化点： - 我记得上一次我有一个同学评论说：“删除缓存可以放在构造函数中并在get中执行，如果不采用它会不会很好吗？”;

- 为什么不为in而不是为了？对于遍历对象属性的in循环，将访问原型链上的所有属性，

- 解决方案：使用hasOwnProperty方法或Object.keys进行过滤将返回其可枚举属性的数组;

总结:以上是今天大家的分享，你有GET吗？ 小程序，sessionStorage，localStorage适用。提示：沈阳汇海科技有限公司汇集了业界众多网络精英和顶级设计师及程序员，以WEB交互应用，移动互联网应用和商用软件为战略方向。凭借成熟的技术，创新的理念和不断开拓的精神，我们为各行各业的客户提供服务。