客戶端存儲——Storage

方法

1. setItem(name, value):爲指定的鍵設置值
2. getItem(name):獲取指定鍵的值
3. key（index）：獲取index位置的鍵名
4. removeItem(name):根據指定的鍵刪除鍵值對
5. clear():刪除全部的簡直對

測試：

sessionStorage.setItem("book", "Professional JavaScript");

const sessionLength = sessionStorage.length;

for(let i=0;i<sessionLength;i++){
    const key = sessionStorage.key(i);
    console.log(`${i}:${key}`);
}

測試結果：

實例化對象

• sessionStorage
  定義：sessionStorage存儲某個特定會話的數據，這些數據值保持在瀏覽器運行期間。
  特色：
  一、sessionStorage中的數據能夠跨越頁面刷新而存在
  二、綁定於某個特定的服務器會話
  三、至關於一個頁面的全局變量，能夠用來記錄某個頁面的訪問次數

• globalStorage
  定義：擁有特定訪問限制的跨越會話存儲數據
  特色：
  一、globalStorage不算是storage的實例化對象，globalStorage['baidu.com'](指定哪一個域名能夠訪問
  該數據)纔算是storage的實例化對象，才能使用storage對象中的全部方法

• localStorage
  定義：localStorage和globalStorage都是用於用戶數據的長久存儲，可是他沒有規則的限制，規則早已制定好：只有來自同一域名，使用同一協議，在同一端口上的頁面才能夠訪問localStorage中存儲的數據，localStorage已經代替globalStorage來進行長久用戶數據的存儲

storage事件

• 觸發時間
  只要對Storage對象進行修改，就會在document上觸發這個事件，例如調用setItem，removeItem或者clear方法時都會觸發這個事件
• 具體使用方法

EventUtil.addHandler(document, "storage", (event) => {
        const change = `Storage changed for ${event.domain}-${event.key}-${event.oldValue}-${event.newValue}`;
        console.log(change);
    })

監聽事件的返回對象參數有：

• domain:發生變化的域名
• key：發生修改的鍵
• oldValue：修改前的值
• newValue：修改後的值

注意：這個事件對localStorage和sessionStorage都有用，可是沒法判斷是哪個

使用事例

function updateCounter(){
    document.getElementById('count1').innerHTML = sessionStorage.pageLoadCount;
    document.getElementById('count2').innerHTML = localStorage.pageLoadCount;  
}

function counter(){
    if(localStorage.getItem('pageLoadCount') === null){
        localStorage.setItem('pageLoadCount', 0);
    }

    if(sessionStorage.getItem('sessionCount') === null){
        sessionStorage.setItem('pageLoadCount', 0);
    }

    localStorage.pageLoadCount = parseInt(localStorage.getItem('pageLoadCount'))  + 1;
    sessionStorage.pageLoadCount = parseInt(localStorage.getItem('pageLoadCount')) + 1;

    updateCounter();
}

counter();

能夠看到每刷新一次頁面，pageLoadCount都會加1，可是當關掉這個頁面的時候，sessionStorage中的pageLoadCount會還原成1，localStorage中的pageLoadCount仍是原來的數