web 本地儲存 （localStorage、sessionStorage）

說明

對瀏覽器來說，使用 Web Storage 儲存鍵值對比儲存 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorage

1. sessionStorage（臨時儲存） ：為每一個數據源維持一個儲存區域，在瀏覽器開啟期間存在，包括頁面重新載入
2. localStorage（長期儲存） ：與 sessionStorage 一樣，但是瀏覽器關閉後，資料依然會一直存在

API

sessionStorage 和 localStorage 的用法基本一致，引用型別的值要轉換成JSON

1. 儲存資料到本地

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

1. 從本地儲存獲取資料

    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON
 
.parse(localStorage.getItem('key'));

1. 本地儲存中刪除某個儲存的資料（移除某一個）

    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

1. 刪除所有儲存的資料（清空所有）

    sessionStorage.clear();
    localStorage.clear();

1. 監聽本地儲存的變化

Storage 發生變化（增加、更新、刪除）時的 觸發，同一個頁面發生的改變不會觸發，只會監聽同一域名下其他頁面改變 Storage

    window.
 
addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

一個簡單常用的set()和get()方法（加入了時間過期）

//封裝過期控制程式碼
    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);
        if(data == null){
            return null;
        }
        var dataObj = JSON.parse(data);
        if (new Date().getTime() - dataObj.time>exp) {
            localStorage.removeItem(key);
            //console.log('資訊已過期');
            return null;
            //alert("資訊已過期")
        }else{
            //console.log("data="+dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = dataObj.data;
            return dataObjDatatoJson;
        }
    }

瀏覽器檢視方法

進入開發者工具
選擇 Application
在左側 Storage 下 檢視 Local Storage 和 Session Storage