1. ホーム
  2. Web制作
  3. html5

localStorageの有効期限を設定する詳細な方法

2022-02-01 13:28:58

localStorageは積極的に削除されることはなく、破棄されることもないことは周知の事実です。では、localStorageの有効期限はどのように設定するのでしょうか?

<script type="text/javascript">
    // Wrap the expiration control code
    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('Message has expired');
            //alert("Information has expired")
        }else{
            //console.log("data="+dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = JSON.parse(dataObj.data)
            return dataObjDatatoJson;
        }
    }
 </script>

利用シーン

1. ローカルデータを使用し、ネットワーク伝送を削減する
2. 2. 高遅延、低帯域、弱いネットワーク環境ではできるだけデータを局在化させること

使用方法

<script>
window.onload = function(){
    var Ipt = document.getElementById('input1');
    var value = '{"name":"和派孔明","Age":"18","address":"Lujiazui Financial City"}';
    set('information',value);

    Ipt.onclick = function(){
        //var dataObjData=get('information',1000);//expired time is 1 second, normally, you click when it has expired
        //var dataObjData=get('information',1000*60);//expiration time is 1 minute
        //var dataObjData=get('information',1000*60*60);//expired for 1 hour
        //var Obj=get('information',1000*60*60*24);//expiration time is 24 hours
        var dataObjData=get('information',1000*60*60*24*7);//expiration time is 1 week
        console.log(dataObjData || null);
            if (dataObjData!="" && dataObjData!=null) {
                    console.log("Name:"+dataObjData.name);
                    console.log("Age:"+dataObjData.Age );
                    console.log("Address:"+dataObjData.Age );
            }else{
                alert("The information obtained has expired");
            }   
    }
}
</script>

localStorageの期限切れ制御の実行コードの結果が期限切れでないこと

コードの実行により、LocalStorageの有効期限コントロールが切れる

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。