好程序員教程之HTML5中的storage 如何使用

HTML5中，咱們經常用到storage，那這個storage究竟是什麼？有啥用呢？ 其實，storage是個很簡單的東西，只要熟悉JavaScript中對象的童鞋，看完小編本文的分享，對storage的概念及用法應該都能掌握個七七八八了。 在HTML5中，你能夠吧storage 想象成是儲存在客戶端（瀏覽器）中的一些 javascript 對象，那麼有什麼用呢？舉個簡單的例子，百度搜索會把你每次的搜索關鍵字用 storage（localStorage） 存儲下來，那麼下次你再搜索相同的內容的時候，它會優先將你曾經搜過的內容進行下拉展現。 關於 storage 的內容，能夠用 chrome 下的 Resources 面板進行查看。 方法：

一、clear() 刪除全部值。ff 沒有實現 二、getItem(name) 根據指定的名字 name 獲取對應的值 三、key(index) 得到 index 位置處的值的名字 四、removeItem(name) 刪除由 name 指定的名值對 五、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 對象有以下屬性：

一、domain 發生變化的存儲空間的域名 二、key 設置或者刪除的鍵名 三、newValue 若是是設置值，則是新值；若是是刪除鍵，則是 null 四、oldValue 鍵被更改以前的值 遺憾的是，webkit（chrome）還不支持這個事件，儘管 IE8 以及 ff 支持其部分屬性，但由於 chrome 的不支持，註定其到目前爲止還沒法普遍使用。 EventUtil.addHandler(document, 'storage', function(e) { console.log(e.domain, e.key, e.newValue, e.oldValue); }); 以上就是html5中，涉及到的storage相關內容及其使用方法，若是你們在前端開發中，須要實現上述功能，不妨能夠試試上述方法。