淺談Web Storage API的使用

目錄

一、瀏覽器的本地存儲技術(shù)

除了最早的使用cookie來(lái)進(jìn)行本地存儲之外，現代瀏覽器使用Web Storage API來(lái)方便的進(jìn)行key/value的存儲。

Web Storage有兩種存儲方式：

1.1、sessionStorage

對于每一個(gè)訪(fǎng)問(wèn)源，都會(huì )維持一個(gè)獨立的存儲區域。只要瀏覽器不關(guān)閉，這些數據都不會(huì )消失。

所以這種存儲叫做session存儲。

注意，這里的session和服務(wù)器端的session的意思是不一樣的，這里的sessionStorage只是本地的存儲，并不會(huì )將數據傳輸到服務(wù)器端。

sessionStorage的存儲容量要比cookie大得多，可以達到5MB。

1.2、localStorage

和sessionStorage類(lèi)似，也是用來(lái)做數據存儲的，不同的是localStorage存儲的數據不會(huì )隨著(zhù)瀏覽器的關(guān)閉而消失。

我可以通過(guò)設置過(guò)期時(shí)間，使用javascript手動(dòng)刪除或者清楚瀏覽器緩存來(lái)清除localStorage。

這兩種存儲方式是通過(guò)Window.sessionStorage 和 Window.localStorage來(lái)使用的。事實(shí)上我們看下Window的定義：

interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage 

Window繼承了WindowLocalStorage和WindowSessionStorage，所以我們可以直接從Window來(lái)獲取sessionStorage和localStorage。

對于每一個(gè)origin源來(lái)說(shuō)，Window.sessionStorage 和 Window.localStorage 都會(huì )創(chuàng )建一個(gè)新的Storage對象，用來(lái)進(jìn)行數據的讀取。

二、Web Storage相關(guān)接口

和web storage相關(guān)的接口有三個(gè)。第一就是剛剛講到的window。我們可以通過(guò)window獲取sessionStorage和localStorage。

第二個(gè)就是Storage對象，獲取到的兩個(gè)Storage都是Storage對象。

interface Storage {

    readonly length: number;

    clear(): void;

    getItem(key: string): string | null;

    key(index: number): string | null;

    removeItem(key: string): void;

    setItem(key: string, value: string): void;
    [name: string]: any;
}

我們可以看到Storage對象為我們提供了很多有用的方法，對數據進(jìn)行存取。

第三個(gè)就是StorageEvent，當storage發(fā)現變化的時(shí)候就會(huì )觸發(fā)StorageEvent事件。

三、瀏覽器兼容性

我們用兩張圖來(lái)看一下這兩個(gè)storage在不同瀏覽器的兼容性：

Window.localStorage:

Window.sessionStorage:

可以看到，現代瀏覽器基本上都是支持這兩種storage特性的。

如果我們使用的是老式的瀏覽器，比如Internet Explorer 6 ，7 或者其他沒(méi)有列出的瀏覽器，我們就需要進(jìn)行檢測，判斷Storage是否被瀏覽器有效的支持。

我們看下怎么做檢測：

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

其中的type就是localStorage或者sessionStorage，我們通過(guò)捕獲異常來(lái)判斷是否存在有效的Storge對象。

看下我們怎么使用：

if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

四、隱身模式

大多數現代瀏覽器都支持一種隱身模式，在這種模式下，將不會(huì )存儲瀏覽歷史記錄和Cookie等數據隱私選項。

所以這和Web Storage是不兼容的。那么怎么解決這個(gè)問(wèn)題呢？

不同的瀏覽器可能采用不同的解決辦法。

比如Safari中，隱身模式下Web Storage雖然是可用的，但是不會(huì )存儲任何東西。

也有些瀏覽器會(huì )選擇在瀏覽器關(guān)閉的時(shí)候清空之前的所有存儲。

所以，我們在開(kāi)發(fā)的過(guò)程中，一定要注意不同瀏覽器的不同處理方式。

五、使用Web Storage API

對于Storage對象，我們可以像普通對象一樣直接訪(fǎng)問(wèn)對象中的屬性，也可以使用Storage.getItem() 和 Storage.setItem() 來(lái)訪(fǎng)問(wèn)和設置屬性。

注意Storage對象中的key value都是string類(lèi)型的，即使你輸入的是integer，也會(huì )被轉換成為String。

下面的例子，都可以設置一個(gè)colorSetting屬性：

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

雖然三種方式都可以實(shí)現存取的功能，但是我們推薦使用Web Storage API：setItem, getItem, removeItem, key, length等。

除了對Storage中的值進(jìn)行設置之外，我們還可以觸發(fā)和監聽(tīng)StorageEvent。

先看一下StorageEvent的定義：

interface StorageEvent extends Event {

    readonly key: string | null;

    readonly newValue: string | null;

    readonly oldValue: string | null;

    readonly storageArea: Storage | null;

    readonly url: string;
}

每當Storage對象發(fā)送變化的時(shí)候，就出觸發(fā)StorageEvent事件。

注意，如果是sessionStorage的變化，則不會(huì )被觸發(fā)。

如果一個(gè)domain中的某個(gè)頁(yè)面發(fā)生了Storage的變化，那么這個(gè)domain的其他頁(yè)面都會(huì )監聽(tīng)到這個(gè)變化。當然，如果是其他domain的話(huà)，是監聽(tīng)不到這個(gè)StorageEvent的。

我們可以通過(guò)window的addEventListener方法，來(lái)添加storage事件，如下所示：

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

上面的例子中，我們從StorageEvent中獲取了key，oldValue，newValue，url和Storage對象。

以上就是淺談Web Storage API的使用的詳細內容，更多關(guān)于Web Storage API的資料請關(guān)注腳本之家其它相關(guān)文章！