HTML5 高級(jí)系列：web Storage 學(xué)前端開發(fā)要先看這個(gè) 前言 HTML5 的 web Storage 存儲(chǔ)方式有兩種：localStorage 和 sessionStorage。 這兩種方式都是通過(guò)鍵值對(duì)保存數(shù)據(jù)，存取方便，不影響網(wǎng)站性能。他們的用法相同，存儲(chǔ)時(shí)間不同。 localStorage 的數(shù)據(jù)保存在本地硬件上，可以永久保存，可以手動(dòng)調(diào)用api清除數(shù)據(jù)。sessionStorage 保存在 session 對(duì)象中，會(huì)在瀏覽器關(guān)閉時(shí)被清除。 web Storage 的大小在瀏覽器上是有限制的，不同瀏覽器大小會(huì)有區(qū)別，在主流瀏覽器中，大小約為 5M，用來(lái)存儲(chǔ)普通數(shù)據(jù)其實(shí)已經(jīng)足夠。 用法 更多的學(xué)習(xí)資源+web前端25群 找小潔老師 以localStorage 為例，sessionStorage用法一樣： ? setItem 保存數(shù)據(jù)：localStorage.setItem(key,value); 示例： localStorage.setItem('name','Hello World'); 當(dāng) key 相同時(shí)會(huì)覆蓋之前的 value，用于修改數(shù)據(jù)。如果 value 為對(duì)象，需轉(zhuǎn)為 json 字符串，否則你讀取出來(lái)的將會(huì)是 [object Object] getItem 讀取數(shù)據(jù)：localStorage.getItem(key); 示例： localStorage.getItem('name'); // Hello World removeItem 刪除單個(gè)數(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í)會(huì)把localStorage 中的所有數(shù)據(jù)都刪除。 key 得到某個(gè)索引的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)目中，可能需要多次對(duì) localStorage 進(jìn)行操作，我們可以通過(guò)一個(gè)構(gòu)造函數(shù)來(lái)更好的操作。 示例： 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字符把構(gòu)造函數(shù)實(shí)例化出多個(gè)對(duì)象 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 這里只是簡(jiǎn)單的演示，像我們平時(shí)在項(xiàng)目中可能要把對(duì)象存儲(chǔ)起來(lái)，就需要在代碼里做些處理。 監(jiān)聽storage 事件 可以通過(guò)監(jiān)聽 window對(duì)象的 storage 事件并指定其事件處理函數(shù)，當(dāng)頁(yè)面中對(duì) localStorage 或 sessionStorage 進(jìn)行修改時(shí)，則會(huì)觸發(fā)對(duì)應(yīng)的處理函數(shù)。 window.addEventListener('storage',function(e){ console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue); }) 觸發(fā)事件的時(shí)間對(duì)象（e 參數(shù)值）有幾個(gè)屬性： key : 鍵值。 oldValue : 被修改前的值。 newValue : 被修改后的值。 url : 頁(yè)面url。 storageArea : 被修改的 storage 對(duì)象。 注意：在谷歌瀏覽器中，需要在不同標(biāo)簽頁(yè)中修改 storage 才會(huì)觸發(fā)該事件，即網(wǎng)頁(yè)A 監(jiān)聽該事件，在網(wǎng)頁(yè)B 中修改 localStorage，則網(wǎng)頁(yè)A 會(huì)觸發(fā)事件函數(shù)。但是在 IE 中，在同個(gè)網(wǎng)頁(yè)修改 localStorage 都會(huì)觸發(fā)該事件。 調(diào)試 谷歌瀏覽器自帶調(diào)試工具(chrome devtools)非常好用，可以用來(lái)調(diào)試 localStorage 和 sessionStorage。打開瀏覽器按f12調(diào)出調(diào)試工具，可以看到 Application ，點(diǎn)擊打開可以看到左邊欄有 Storage，包括了 localStorage、sessionStorage、IndexedDB等，選中我們要調(diào)試的網(wǎng)站域名，可以看到右邊有對(duì)應(yīng)的 key 和 value，可以通過(guò)右鍵進(jìn)行編輯或刪除等。 兼容 IE8 以上就兼容，但是比較特別，需要在服務(wù)器上打開的才支持，直接雙擊打開文件的 file:// 是不兼容的。 到了 IE11 才支持 file:// 下打開的，其他瀏覽器的支持程度都很高，包括在手機(jī)上的兼容。

轉(zhuǎn)載于:https://www.cnblogs.com/xsns/p/6767542.html

總結(jié)

以上是生活随笔為你收集整理的HTML5 高级系列：web Storage 学前端开发要先看这个的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。