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

10年積累的成都做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有沂南免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

在HTML5中，你可以吧storage 想象成是儲存在客戶端（瀏覽器）中的一些 javascript 對象，那么有什么用呢？舉個簡單的例子，百度搜索會把你每次的搜索關(guān)鍵字用 storage（localStorage） 存儲下來，那么下次你再搜索相同的內(nèi)容的時候，它會優(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è)置一個對應(yīng)的值

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

sessionStorage

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

// 設(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 對象綁定于某個服務(wù)器會話，所以當(dāng)文件在本地運(yùn)行的時候是不可用的。

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

localStorage

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

Storage 事件

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

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

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

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

4、oldValue 鍵被更改之前的值

遺憾的是，webkit（chrome）還不支持這個事件，盡管 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)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享文章：HTML5中的storage如何使用
分享URL：http://jinyejixie.com/article12/ijgjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站建設(shè)、App設(shè)計(jì)、標(biāo)簽優(yōu)化、商城網(wǎng)站、定制網(wǎng)站

廣告

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