1、概述數組
HTML5 提供了兩種在客戶端存儲數據的新方法:瀏覽器
以前,這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲,由於它們由每一個對服務器的請求來傳遞,這使得 cookie 速度很慢並且效率也不高。服務器
在 HTML5 中,數據不是由每一個服務器請求傳遞的,而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。cookie
對於不一樣的網站,數據存儲於不一樣的區域,而且一個網站只能訪問其自身的數據。session
HTML5 使用 JavaScript 來存儲和訪問數據。app
/************************源自w3c****************************/性能
2、用法小結網站
(一)設置值this
1. localStorage.setItem(key,value):若是key的value存在時,更新key的值,例:localStorage.setItem("name","moomoo");【推薦寫法】spa
2. localStorage.name = "moomoo";
3. localStorage["name"] = "moomoo";
(二)獲取值
1. localStorage.getItem(key,value):若是key的value不存在時,返回null,例:localStorage.getItem("name");【推薦寫法】
2. var name = localStorage.name;
3. var name = localStorage["name"];
(三)清除值
1. localStorage.remove(key),表示清除單項key的值,例:localStorage.remove("name");執行這句話就會清除name的值
2. localStorage.clear(),表示清除localStorage存儲的全部數據
(四)遍歷存儲的數據
當你不清楚本地localStorage存儲了多少數據的時候,用key(index)方法絕對是一個不錯的選擇,key(index)方法能夠遍歷localStorage存儲的key。寫個簡單的例子:
for(i=0;i<localStorage.length;i++){
document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br/>");
}
localStorage.length表示本地存儲數據的總量;
localStorage.key(i),表示獲取第i個數據的key;
localStorage.getItem(localStorage.key(i)),表示獲取第i個數據的value。
(五)JSON存儲
當須要存儲的數據不少時,能夠將數據存儲到數組中並轉換成JSON格式的數據。
1. JSON.stringify(data) 將對象轉換成JSON格式的數據串。
2. JSON.parse(data)將數據解析成對象並返回解析後的對象。
這樣說或許不太好懂,直接上例子:
var arr = {"name":"moomoo","age":2,"eat":"apple"};
localStorage.setItem("arr",JSON.stringify(arr));
arr = JSON.parse(localStorage.getItem("arr"));
若是想要肯定這些信息是否真的存儲在瀏覽器本地,拿谷歌舉例:在瀏覽器空白處右擊,選擇檢查(直接上圖好了)
這樣就能夠很方便的審查存儲在本地的數據了。
不過須要注意的是:localStorage存儲的數據是不能跨瀏覽器共用的,也就是說存儲在瀏覽器的數據只能在這個瀏覽器中訪問,如今各個瀏覽器的存儲空間是5M。
(六)sessionStorage
sessionStorage是個全局對象,它維護着在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開着,頁面會話週期就會一直持續。當頁面從新載入(reload)或者被恢復(restores)時,頁面會話也是一直存在的。每在新標籤或者新窗口中打開一個新頁面,都會初始化一個新的會話,也就是說sessionStorage針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後,數據會被刪除。
當瀏覽器被意外刷新的時候,一些臨時數據應當被保存和恢復。sessionStorage 對象在處理這種狀況的時候是最有用的。sessionStorage自動保存一個文本域中的內容,若是瀏覽器被意外刷新,則恢復該文本域中的內容,因此不會丟失任何輸入的數據。
sessionStorage 方法與localStorage的方法類似,這裏就不過多贅述。
(七)兼容性
如圖可知並非全部的瀏覽器都支持。若是你想在沒有原生支持localStorage對象的瀏覽器中使用它,能夠在你編寫的 JavaScript代碼的首部插入下面兩段代碼中的任意一段。
if (!window.localStorage) { Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; Object.defineProperty(oStorage, "getItem", { value: function (sKey) { return sKey ? this[sKey] : null; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "key", { value: function (nKeyId) { return aKeys[nKeyId]; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "length", { get: function () { return aKeys.length; }, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "removeItem", { value: function (sKey) { if(!sKey) { return; } var sExpDate = new Date(); sExpDate.setDate(sExpDate.getDate() - 1); document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in oStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete oStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) { iCouple = aCouples[iCouplId].split(/\s*=\s*/); if (iCouple.length > 1) { oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]); aKeys.push(iKey); } } return oStorage; }; this.configurable = false; this.enumerable = true; })()); }
或
if (!window.localStorage) { window.localStorage = { getItem: function (sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return null; } return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); }, key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, setItem: function (sKey, sValue) { if(!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; this.length = document.cookie.match(/\=/g).length; }, length: 0, removeItem: function (sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return; } var sExpDate = new Date(); sExpDate.setDate(sExpDate.getDate() - 1); document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; this.length--; }, hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } }; window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; }
你們自行領會……這兩段……表示不懂/(ㄒoㄒ)/~~