本篇內(nèi)容介紹了“HTML5中的storage如何使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)主營云城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),云城h5微信小程序搭建,云城網(wǎng)站營銷推廣歡迎云城等地區(qū)企業(yè)咨詢

HTML5中，我們常常用到storage，那這個(gè)storage到底是什么？有啥用呢？

其實(shí)，storage是個(gè)很簡單的東西，只要熟悉JavaScript中對象的，看完小編本文的分享，對storage的概念及用法應(yīng)該都能掌握個(gè)七七八八了。

在HTML5中，你可以吧storage 想象成是儲(chǔ)存在客戶端（瀏覽器）中的一些 javascript 對象，那么有什么用呢？舉個(gè)簡單的例子，百度搜索會(huì)把你每次的搜索關(guān)鍵字用 storage（localStorage） 存儲(chǔ)下來，那么下次你再搜索相同的內(nèi)容的時(shí)候，它會(huì)優(yōu)先將你曾經(jīng)搜過的內(nèi)容進(jìn)行下拉展示。 關(guān)于 storage 的內(nèi)容，可以用 chrome 下的 Resources 面板進(jìn)行查看。

方法：

1、clear() 刪除所有值。ff 沒有實(shí)現(xiàn)

2、getItem(name) 根據(jù)指定的名字 name 獲取對應(yīng)的值

3、key(index) 獲得 index 位置處的值的名字

4、removeItem(name) 刪除由 name 指定的名值對

5、setItem(name, value) 為指定的 name 設(shè)置一個(gè)對應(yīng)的值

也可以用點(diǎn)語法和方括號語法來訪問設(shè)置，但是建議用上面的方法。除此之外，還需要注意的一點(diǎn)就是 value 必須是字符串 。

sessionStorage

顧名思義，sessionStorage 對象存儲(chǔ)特定于某個(gè)會(huì)話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關(guān)閉，或者更準(zhǔn)確地說是保持到該頁面標(biāo)簽關(guān)閉為止。對于同一個(gè)頁面，在不同標(biāo)簽中打開，是擁有不同的 sessionStorage 對象的，而如果相同頁面，刷新后，sessionStorage 對象也會(huì)重新開始。

// 設(shè)置

sessionStorage.setItem('name', 'maiziedu');

sessionStorage.age = '10';

// 讀取

var name = sessionStorage.getItem('name'); // maiziedu

var age = sessionStorage.age; // 10

// 遍歷

for (var i = 0, len = sessionStorage.length; i < len; i++) {

var key = sessionStorage.key(i);

var value = sessionStorage.getItem(key);

console.log(key, value);

}

// age 10

// name maiziedu

// 也可以用 for in

for (var key in sessionStorage) {

console.log(key, sessionStorage.getItem(key));

}

// 刪除

delete sessionStorage.name;

sessionStorage.removeItem('age');

因?yàn)? sessionStorage 對象綁定于某個(gè)服務(wù)器會(huì)話，所以當(dāng)文件在本地運(yùn)行的時(shí)候是不可用的。

sessionStorage 對象主要用于僅針對會(huì)話的小段數(shù)據(jù)的存儲(chǔ)，如果需要跨域會(huì)話存儲(chǔ)數(shù)據(jù)，那么就要使用 localStorage 了。

localStorage

localStorage 和 sessionStorage 大抵相同。可以多頁面訪問同一個(gè) localStorage 對象，但是頁面必須來自同一域名（子域名無效），使用同一種協(xié)議，同一個(gè)端口（同源策略）。至于 localStorage 的使用方法，可以參考上面 sessionStorage 的使用。

Storage 事件

對 Storage 對象進(jìn)行任何修改，都會(huì)在文檔上觸發(fā) Storage 事件。當(dāng)通過屬性或 setItem() 方法保存數(shù)據(jù)，使用 delete 操作符或者 removeItem() 刪除數(shù)據(jù)，或者調(diào)用 clear() 方法時(shí)，都會(huì)發(fā)生該事件。這個(gè)事件的 event 對象有如下屬性：

1、domain 發(fā)生變化的存儲(chǔ)空間的域名

2、key 設(shè)置或者刪除的鍵名

3、newValue 如果是設(shè)置值，則是新值；如果是刪除鍵，則是 null

4、oldValue 鍵被更改之前的值

遺憾的是，webkit（chrome）還不支持這個(gè)事件，盡管 IE8 以及 ff 支持其部分屬性，但因?yàn)?chrome 的不支持，注定其到目前為止還無法廣泛使用。

EventUtil.addHandler(document, 'storage', function(e) {

console.log(e.domain, e.key, e.newValue, e.oldValue);

});

“HTML5中的storage如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

標(biāo)題名稱：HTML5中的storage如何使用-創(chuàng)新互聯(lián)
標(biāo)題來源：http://aaarwkj.com/article10/phego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站收錄、建站公司、網(wǎng)頁設(shè)計(jì)公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(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)