HTML5中的storage如何使用-創(chuàng)新互聯(lián)

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

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

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

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

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

方法：

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

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

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

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

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

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

sessionStorage

顧名思義，sessionStorage 對象存儲特定于某個會話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關閉，或者更準確地說是保持到該頁面標簽關閉為止。對于同一個頁面，在不同標簽中打開，是擁有不同的 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 對象主要用于僅針對會話的小段數(shù)據(jù)的存儲，如果需要跨域會話存儲數(shù)據(jù)，那么就要使用 localStorage 了。

localStorage

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

Storage 事件

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

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

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

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

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

廣告

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

成都做網(wǎng)站