HTML5本地存儲之localStorage、sessionStorage

時間 2019-11-08

標籤 html5 html 本地存儲 localstorage sessionstorage 欄目 HTML5 简体版

原文原文鏈接

一、概述

localStorage和sessionStorage統稱爲Web Storage，它使得網頁能夠在瀏覽器端儲存數據。javascript

sessionStorage保存的數據用於瀏覽器的一次會話，當會話結束（一般是該窗口關閉），數據被清空；localStorage保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。除了保存期限的長短不一樣，這兩個對象的屬性和方法徹底同樣。html

它們很像cookie機制的強化版，可以動用大得多的存儲空間。目前，每一個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存儲存空間由一級域名決定，而其餘瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example共享5MB的存儲空間。另外，與cookie同樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取。html5

經過檢查window對象是否包含sessionStorage和localStorage屬性，能夠肯定瀏覽器是否支持這兩個對象。java

function checkStorageSupport() {

    var result = {};

    //sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }

    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }

    return result;

}

二、操做方法

2.1 存入/讀取數據

sessionStorage和localStorage保存的數據，都以「鍵值對」的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。全部的數據都是以文本格式保存。web

存入數據用setItem方法。它接受兩個參數，第一個是鍵名，第二個是保存的數據。api

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

讀取數據使用getItem方法。它只有一個參數，就是鍵名。瀏覽器

var valueSession = sessionStorage.getItem('key');

var valueLocal = localStorage.getItem('key');

2.2 清除數據

removeItem方法用於清除某個鍵名對應的數據。cookie

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear方法用於清除全部保存的數據。session

sessionStorage.clear();

localStorage.clear();

2.3 遍歷操做

利用length屬性和key方法，能夠遍歷全部的鍵。函數

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

其中的key方法，根據位置（從0開始）得到鍵值。

localStorage.key(1);

三、storage事件

當儲存的數據發生變化時，會觸發storage事件。咱們能夠指定這個事件的回調函數。

window.addEventListener('storage', onStorageChange);

回調函數接受一個event對象做爲參數。這個event對象的key屬性，保存發生變化的鍵名。

function onStorageChange(e) {
    console.log(e.key);
}

除了key屬性，event對象的屬性還有三個：

oldValue：更新前的值。若是該鍵爲新增長，則這個屬性爲null。

newValue：更新後的值。若是該鍵被刪除，則這個屬性爲null。

url：原始觸發storage事件的那個網頁的網址。

值得特別注意的是，該事件不在致使數據變化的當前頁面觸發。若是瀏覽器同時打開一個域名下面的多個頁面，當其中一個頁面改變sessionStorage或localStorage的數據時，其餘全部頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。能夠經過這種機制，實現多個窗口之間的通訊。全部瀏覽器之中，只有IE瀏覽器除外，它會在全部頁面觸發storage事件。