前端筆記

實作localStorage 設定過期時間

localStorage 是每個前端都要知道的東西,但localStorage卻很少人會教,在實作專體時常常會遇到,頁面重新整理後資料不可被刷新,要寫防呆,要記錄滾輪位置等等,localStorage的重要性就在這邊,他就類似Cookie,使用上卻比Cookie來的好用很多。

儲存LocalStorage 並設定過期時間

function store(key,value,expire) {
    let obj = {
        time:new Date().getTime(),
        value:value,
        expire:expire,
    }
    //localStorage只能儲存字串,所以要先將物件轉成字串
    let objStr = JSON.stringify(obj);
    localStorage.setItem(key,objStr);
}
//儲存name,名稱為'hxj',過期時間為5000毫秒
store('name','hxj',5000);
var timer = setInterval(function () {
    if(localStorage.getItem('name')){
        var name = localStorage.getItem('name');
        var nameObj = JSON.parse(name);
        console.log(new Date().getTime() - nameObj.time);
        if(new Date().getTime() - nameObj.time >= nameObj.expire){
            localStorage.removeItem('name')
        }
    }else{
        alert('localStorage已失效');
        clearInterval(timer);
    }
},1000)

新增”name” localStorage

5秒後刪除localStorage

留下一個回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

%d 位部落客按了讚: