這篇文章主要為大家展示了“HTML5中web Storage的存儲(chǔ)方式有幾種”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5中web Storage的存儲(chǔ)方式有幾種”這篇文章吧。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的霞浦網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!前言HTML5 的 web Storage 存儲(chǔ)方式有兩種:localStorage 和 sessionStorage。
這兩種方式都是通過鍵值對(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)足夠。
用法以 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 WorldremoveItem
刪除單個(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)行操作,我們可以通過一個(gè)構(gòu)造函數(shù)來(lái)更好的操作。
示例:
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í)例化出多個(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 事件可以通過監(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,可以通過右鍵進(jìn)行編輯或刪除等。
兼容IE8 以上就兼容,但是比較特別,需要在服務(wù)器上打開的才支持,直接雙擊打開文件的 file:// 是不兼容的。
到了 IE11 才支持 file:// 下打開的,其他瀏覽器的支持程度都很高,包括在手機(jī)上的兼容。
以上是“HTML5中web Storage的存儲(chǔ)方式有幾種”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!
本文標(biāo)題:HTML5中webStorage的存儲(chǔ)方式有幾種-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://muchs.cn/article12/ddpdgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容