HTML5 高級系列：web Storage

html5

瀏覽數:172

2017-10-23

前言

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

這兩種方式都是通過鍵值對保存數據，存取方便，不影響網站性能。他們的用法相同，存儲時間不同。
localStorage 的數據保存在本地硬件上，可以永久保存，可以手動調用api清除數據。sessionStorage 保存在 session 對象中，會在瀏覽器關閉時被清除。

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

用法

以 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 () { ????????return localStorage.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，可以通過右鍵進行編輯或刪除等。

兼容

IE8 以上就兼容，但是比較特別，需要在服務器上打開的才支持，直接雙擊打開文件的 file:// 是不兼容的。

到了 IE11 才支持 file:// 下打開的，其他瀏覽器的支持程度都很高，包括在手機上的兼容。具體兼容可查看：http://caniuse.com/#search=localstorage

下一篇將介紹本地存儲的另一種方式 ：HTML5 高級系列：indexedDB 數據庫

原文鏈接：https://github.com/lin-xin/blog/issues/11

總結

以上是生活随笔為你收集整理的HTML5 高级系列：web Storage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。