localStorage设置过期时间

一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存，减少对服务器的请求。

1.cookie数据存放在本地硬盘中，只要在过期时间之前，都是有效的，即使重启浏览器。但是会在每次HTTP请求中添加到请求头中，如果数据过多，会造成性能问题。

2.sessionStorage保存在浏览器内存中，当关闭页面或者浏览器之后，信息丢失。

3.localstorage也是保存在本地硬盘中，除非主动清除，信息是不会消失的。但是实际使用时我们需要对缓存设置过期时间，本文便是讲解如何为localstorage添加过期时间功能。

这三者仅支持同源(host+port)的数据,不同源的数据不能互相访问到。

localstorage

localstorage支持以下方法：

保存数据：localStorage.setItem(key,value); 
读取数据：localStorage.getItem(key); 
删除单个数据：localStorage.removeItem(key); 
删除所有数据：localStorage.clear(); 
得到某个索引的key：localStorage.key(index); 

需要注意的是，仅支持String类型数据的读取，如果存放的是数值类型，读出来的是字符串类型的，对于存储对象类型的，需要在保存之前JSON化为String类型。

小实例：

css：

*{
        margin:0;
        padding:0;
        font-size:20px;
    }
    .box{
        box-sizing: border-box;
        width:100%;
        padding:0 20px;
    }
    .contentk{
        width:100%;
        height:30px;
        display: flex;
        align-items: center;
        margin-top:20px;
    }
    .contentk>div{
        width:25%;
    }
    .contentk>input{
        width:75%;
        height:100%;
        font-size:16px;
        padding:0 5px;
    }
    .contentk>input::-webkit-input-placeholder{
        color:#cccccc;
        font-size:15px;
    }
    .aging{
        margin-top:20px;
    }
    .aging>div:nth-child(2){
        margin-top:10px;
        display: flex;
    }
    label{
        width:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding:5px 0;
        border:1px solid #eeeeee;
    }
    .btn,.btn1{
        width:100%;
        padding:5px 0;
        margin-top:20px;
    }

html:

<div class="box">
            <div class="contentk">
                <div>名字：</div>
                <input type="text" class="name" placeholder="请输入你的名称" />
            </div>
            <div class="contentk">
                <div>备注：</div>
                <input type="text" class="note" placeholder="请输入你要备注的内容" />
            </div>
            <div class="aging">
                <div>请选择保存时长：</div>
                <div>
                    <label><span>1分钟</span><input type="radio" name="storage" value="1分钟" /></label>
                    <label><span>1小时</span><input type="radio" name="storage" value="1小时" /></label>
                    <label><span>24小时</span><input type="radio" name="storage" value="24小时" /></label>
                    <label><span>1周</span><input type="radio" name="storage" value="1周" /></label>
                </div>
            </div>
            <input type="button" class="btn" value="保存" />
            <input type="button" class="btn1" value="获取保存数据" />
        </div>

js:

//保存数据
$(".btn").click(function(){
        var name=$(".name").val();
        var note=$(".note").val();
         var radioValue = $("input[name='storage']:checked").val();  
         if(radioValue==undefined){
             return alert("请选择保存时长");
         }
         var data={
             name:name,
             note:note,
             radioValue:radioValue
         }
         set('test',data);
         alert("保存成功");
    })

    function set(key,value){
        var curTime = new Date().getTime();
        var dateee = new Date().toJSON(curTime);
        var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/.[d]{3}Z/,'');
        localStorage.setItem(key,JSON.stringify({data:value,time:curTime,"保存时间":date}));
    }

    //获取数据
    $(".btn1").click(function(){
        var data =JSON.parse(localStorage.getItem('test'));
        if(data==null){
            return alert("保存信息已过期或未保存数据");
        }
        var time=data.time;
        var radioValue=data.data.radioValue;
        var st="";
        if(radioValue=="1分钟"){
            st=1000*60;
        }else if(radioValue=="1小时"){
            st=1000*60*60;
        }else if(radioValue=="24小时"){
            st=1000*60*24;
        }else if(radioValue=="1周"){
            st=1000*60*24*7;
        }
        if (new Date().getTime() - time>st) {
            alert('保存信息已过期');
            localStorage.removeItem("test");
        }else{
            var curTime = new Date().getTime();
            var dateee = new Date().toJSON(curTime);
            var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/.[d]{3}Z/,'');
            $(".box").after(`<div>名字：${data.data.name}</div>
                <div>备注：${data.data.note}</div><div>保存时长：${data.data.radioValue}</div>
                <div>保存时间：${data.保存时间}</div>
                <div>现在时间：${date}</div>`)
        }
    })