我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢，今天我们来一起尝试一下！

思考点 ​　　

从我们接触前端起，第一个熟悉的存储相关的Cookie或者来分析我们生活中密切相关的淘宝、物流、闹钟等事物来说起吧

Cookie从你设置的时候，就会给个时间，不设置默认会话结束就过期； 
淘宝购物 从你下单付款起，就会给这件货物设置一个收货期限时间，过了这个时间自动认为你收货（即订单结束）； 
闹钟 你设置的提醒时间，其实也就是它的过期时间； 
再比如与您每天切身相关的产品需求，过完需求，你给出的上线时间，也就是这个需求的过期时间； 
再通俗点讲，您今年的生日过完到明年生日之间也是相当于设置了有效期时间；

以上种种，我们能得出一个结论任何一件事、一个行为动作，都有一个时间、一个节点，甚至我们可以黑localStorage，就是一个完善的api，为什么不能给一个设置过期的机制，因为sessionStorage、Cookie并不能满足我们实际的需求。

代码实现：

<script type="text/javascript">
    //封装过期控制代码
    function set(key,value){
        var curTime = new Date().getTime();
        localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
    }
    function get(key,exp){
        var data = localStorage.getItem(key);
        var dataObj = JSON.parse(data);
        if (new Date().getTime() - dataObj.time>exp) {
            console.log('信息已过期');
            //alert("信息已过期")
        }else{
            //console.log("data="+dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = JSON.parse(dataObj.data)
            return dataObjDatatoJson;
        }
    }
 </script>

使用场景： 

1.利用本地数据,减少网络传输 
2.弱网络环境下，高延迟,低带宽,尽量把数据本地化  

使用方法：  

<script>
window.onload = function(){
    var Ipt = document.getElementById('input1');
    var value = '{"name":"和派孔明","Age":"18","address":"陆家嘴金融城"}';
    set('information',value);

    Ipt.onclick = function(){
        //var dataObjData=get('information',1000);//过期时间为1秒,正常情况下，你点击的时候已经过期
        //var dataObjData=get('information',1000*60);//过期时间为1分钟
        //var dataObjData=get('information',1000*60*60);//过期时间为1小时
        //var Obj=get('information',1000*60*60*24);//过期时间为24小时
        var dataObjData=get('information',1000*60*60*24*7);//过期时间为1周
        console.log(dataObjData || null);
            if (dataObjData!="" && dataObjData!=null) {
                    console.log("姓名:"+dataObjData.name);
                    console.log("年龄:"+dataObjData.Age );
                    console.log("地址:"+dataObjData.Age );
            }else{
                alert("获取的信息已经过期");
            }   
    }
}
</script>

链接: https://fly63.com/article/detial/1348