HTML5 高級系列：web Storage

 

 

 前言

HTML5 的 web Storage 存儲方式有兩種：localStorage 和 sessionStorage。

這兩種方式都是經過鍵值對保存數據，存取方便，不影響網站性能。他們的用法相同，存儲時間不一樣。

localStorage 的數據保存在本地硬件上，能夠永久保存，能夠手動調用api清除數據。sessionStorage 保存在 session 對象中，會在瀏覽器關閉時被清除。

web Storage 的大小在瀏覽器上是有限制的，不一樣瀏覽器大小會有區別，在主流瀏覽器中，大小約爲 5M，用來存儲普通數據其實已經足夠。

用法 更多的學習資源+web前端互動交流羣434623999

以localStorage 爲例，sessionStorage用法同樣：

setItem

保存數據：localStorage.setItem(key,value);

示例：

localStorage.setItem('name','Hello World');

當 key 相同時會覆蓋以前的 value，用於修改數據。若是 value 爲對象，需轉爲 json 字符串，不然你讀取出來的將會是 [object Object]

getItem

讀取數據：localStorage.getItem(key);

示例：

localStorage.getItem('name'); // Hello World

removeItem

刪除單個數據：localStorage.removeItem(key);

示例：

localStorage.removeItem('name');

localStorage.getItem('name'); // null

刪除 key 爲 name 的數據後，loaclStorage 裏已經獲取不到該數據，則返回 null;

clear

刪除全部數據：localStorage.clear();

示例：

localStorage.clear();

此時會把localStorage 中的全部數據都刪除。

key

獲得某個索引的key：localStorage.key(index);

示例：

localStorage.setItem('name1','Hello World');

localStorage.setItem('name2','Hello Linxin');

localStorage.key(1); // name2

獲取到索引爲 1 的 key，即 name2。

構造函數

在實際項目中，可能須要屢次對 localStorage 進行操做，咱們能夠經過一個構造函數來更好的操做。

示例：

var localEvent = function (item) {

this.get = function () {

returnlocalStorage.getItem(item);

}

this.set = function (val) {

localStorage.setItem(item, val);

}

this.remove = function () {

localStorage.removeItem(item);

}

this.clear = function () {

localStorage.clear();

}

}

// 使用new字符把構造函數實例化出多個對象

var local1 = new localEvent('name1');

var local2 = new localEvent('name2');

local1.set('Hello World');

local2.set('Hello Linxin');

local1.get(); // Hello World

local2.get(); // Hello Linxin

這裏只是簡單的演示，像咱們平時在項目中可能要把對象存儲起來，就須要在代碼裏作些處理。

監聽storage 事件

能夠經過監聽 window對象的 storage 事件並指定其事件處理函數，當頁面中對 localStorage 或 sessionStorage 進行修改時，則會觸發對應的處理函數。

window.addEventListener('storage',function(e){

console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);

})

觸發事件的時間對象（e 參數值）有幾個屬性：

key : 鍵值。

oldValue : 被修改前的值。

newValue : 被修改後的值。

url : 頁面url。

storageArea : 被修改的 storage 對象。

注意：在谷歌瀏覽器中，須要在不一樣標籤頁中修改 storage 纔會觸發該事件，即網頁A 監聽該事件，在網頁B 中修改 localStorage，則網頁A 會觸發事件函數。可是在 IE 中，在同個網頁修改 localStorage 都會觸發該事件。

調試

谷歌瀏覽器自帶調試工具(chrome devtools)很是好用，能夠用來調試 localStorage 和 sessionStorage。打開瀏覽器按f12調出調試工具，能夠看到 Application ，點擊打開能夠看到左邊欄有 Storage，包括了 localStorage、sessionStorage、IndexedDB等，選中咱們要調試的網站域名，能夠看到右邊有對應的 key 和 value，能夠經過右鍵進行編輯或刪除等。