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>`)
        }
    })