前言

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

創(chuàng)新互聯(lián)建站始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：成都紙箱等企業(yè)，備受客戶贊譽(yù)。

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

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

原文作者：林鑫，作者博客：https://github.com/lin-xin/blog

用法

以 localStorage 為例，sessionStorage 用法一樣：

setItem

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

示例：

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

當(dāng) key 相同時(shí)會覆蓋之前的 value，用于修改數(shù)據(jù)。如果 value 為對象，需轉(zhuǎn)為 json 字符串，否則你讀取出來的將會是 [object Object]

getItem

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

示例：

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

removeItem

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

示例：

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

刪除 key 為 name 的數(shù)據(jù)后，loaclStorage 里已經(jīng)獲取不到該數(shù)據(jù)，則返回 null;

clear

刪除所有數(shù)據(jù)：localStorage.clear();

示例：

localStorage.clear();

此時(shí)會把 localStorage 中的所有數(shù)據(jù)都刪除。

key

得到某個索引的key：localStorage.key(index);
示例：

localStorage.setItem('name1','Hello World');localStorage.setItem('name2','Hello Linxin');localStorage.key(1);                // name2

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

構(gòu)造函數(shù)

在實(shí)際項(xiàng)目中，可能需要多次對 localStorage 進(jìn)行操作，我們可以通過一個構(gòu)造函數(shù)來更好的操作。

示例：

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字符把構(gòu)造函數(shù)實(shí)例化出多個對象var local1 = new localEvent('name1');var local2 = new localEvent('name2');local1.set('Hello World');local2.set('Hello Linxin');local1.get();               // Hello Worldlocal2.get();               // Hello Linxin

這里只是簡單的演示，像我們平時(shí)在項(xiàng)目中可能要把對象存儲起來，就需要在代碼里做些處理。

監(jiān)聽 storage 事件

可以通過監(jiān)聽 window 對象的 storage 事件并指定其事件處理函數(shù)，當(dāng)頁面中對 localStorage 或 sessionStorage 進(jìn)行修改時(shí)，則會觸發(fā)對應(yīng)的處理函數(shù)。

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);})

觸發(fā)事件的時(shí)間對象（e 參數(shù)值）有幾個屬性：

• key : 鍵值。

• oldValue : 被修改前的值。

• newValue : 被修改后的值。

• url : 頁面url。

• storageArea : 被修改的 storage 對象。

注意：在谷歌瀏覽器中，需要在不同標(biāo)簽頁中修改 storage 才會觸發(fā)該事件，即 網(wǎng)頁A 監(jiān)聽該事件，在 網(wǎng)頁B 中修改 localStorage，則 網(wǎng)頁A 會觸發(fā)事件函數(shù)。但是在 IE 中，在同個網(wǎng)頁修改 localStorage 都會觸發(fā)該事件。

調(diào)試

谷歌瀏覽器自帶調(diào)試工具(chrome devtools)非常好用，可以用來調(diào)試 localStorage 和 sessionStorage。打開瀏覽器按f12調(diào)出調(diào)試工具，可以看到 Application ，點(diǎn)擊打開可以看到左邊欄有 Storage，包括了 localStorage、sessionStorage、IndexedDB等，選中我們要調(diào)試的網(wǎng)站域名，可以看到右邊有對應(yīng)的 key 和 value，可以通過右鍵進(jìn)行編輯或刪除等。

兼容

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

到了 IE11 才支持 file:// 下打開的，其他瀏覽器的支持程度都很高，包括在手機(jī)上的兼容。

當(dāng)前文章：webStorage
文章網(wǎng)址：http://www.rwnh.cn/article32/gpopsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)建站、網(wǎng)站建設(shè)、電子商務(wù)、商城網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)