HTML5中的storage如何使用

本篇內容介紹了“HTML5中的storage如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

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

方法：

1、clear() 刪除所有值。ff 沒有實現

2、getItem(name) 根據指定的名字 name 獲取對應的值

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

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

5、setItem(name, value) 為指定的 name 設置一個對應的值

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

sessionStorage

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

// 設置

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');

因為 sessionStorage 對象綁定于某個服務器會話，所以當文件在本地運行的時候是不可用的。

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

localStorage

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

Storage 事件

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

1、domain 發生變化的存儲空間的域名

2、key 設置或者刪除的鍵名

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

4、oldValue 鍵被更改之前的值

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

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

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

});

“HTML5中的storage如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！