localStorage的用途

localStorage基本上就是三個特點：

數據永久被保存在本地，即使瀏覽器被關閉，數據也不會消失

存儲空間大，一般為5~10M

存儲的內容不會和服務器發生任何交互（cookie就會隨著請求發送給server）

因此，當你需要持久的存儲用戶的數據，并且不和服務器交互時，就可以使用localStorage。個人想到的就是在本地保存用戶的登錄狀態，保存用戶的瀏覽記錄，以及一些插件設置等等，或者換句話說，以前用cookie的地方現在基本上都可以使用localStorage進行替代。

localStorage的操作

localStorage是以(Key,Value)的形式進行設置和讀取的，它的操作也非常的簡單。

localStorage.length: 返回現在已經存儲的變量數目。
localStorage.key(n): 返回第n個變量的鍵值(key)。
localStorage.getItem(k): 和localStorage.k一樣，取得鍵值為k的變量的值。
localStorage.setItem(k , v): 和localStorage.k = v一樣，設置鍵值k的變量值。
localStorage.removeItem(k): 刪除鍵值為k的變量。
localStorage.clear(): 清空所有變量。

在Chrome中，localStorage是以文件的形式存儲的，存儲路徑為：C:\Users\UserName\AppData\Local\Google\Chrome\User Data\Default\Local Storage。文件名一般為domain_number.localstorage

localStorage的兼容性

?

可以看出，并不是所有的瀏覽器都支持localStorage的，比如IE6和IE7。說到這里，就不得不說一下本地存儲的進化歷程，從下圖可以對比出localStorage的優勢和來之不易：

cookie的主要問題是容量太小了；userData的問題是只針對IE+Windows的組合；Flash的問題是需要引入swf等相關文件；Gears是谷歌提出的方案，已經停止更新了。

因此，我們主要還是要使用UserData來處理IE6-7的本地存儲。

userData使用

?userData聲明語法：

XMLHTMLScripting

<Prefix:?CustomTag?ID=sID?STYLE="behavior:url('#default#userData')"?/>

<ELEMENT?STYLE="behavior:url('#default#userData')"?ID=sID>

object?.style.behavior = "url('#default#userData')"

object?.addBehavior?("#default#userData")

userData常用方法：

MethodDescription

getAttribute	Retrieves the value of the specified attribute.
load	Loads an object participating in?userData?persistence from a UserData store.
removeAttribute	Removes the specified attribute from the object.
save	Saves an object participating in?userData?persistence to a UserData store.
setAttribute	Sets the value of the specified attribute.

詳細使用方法請看：http://msdn.microsoft.com/en-us/library/ms531424(v=vs.85).aspx

OurJS對不同瀏覽器下localStorage進行了統一封裝：

if (window.localStorage || !document.documentElement.addBehavior || location.protocol === 'file:') {return;}/*** 為不支持 localStorage 的瀏覽器提供類似的功能。* @name localStorage* @namespace* @description* 在不支持 localStorage 的瀏覽器中，會使用路徑 '/favicon.ico' 來創建啟用 userData 的元素。應保證上述路徑存在，以免出現預料外的異常。* userData 的尺寸限制為每文件 128KB，每域 1024KB；受限站點每文件 64KB，每域 640KB。*/var localStorage = window.localStorage = {};// 指定一個固定的 userData 存儲文件名。var STORE_NAME = 'localStorage';// 用來保存 userData 的元素。var storeElement;// 在當前域的根路徑創建一個文檔，并在此文檔中創建用來保存 userData 的元素。try {// 使用這種方式（而不是在當前文檔內直接插入 IFRAME 元素）可以避免在 IE6 的應用代碼中調用 document.write 時出現“已終止操作”的異常。// http://www.cnblogs.com/my_life/articles/2749709.html: 推技術ActiveXobject("htmlfile") 長連接var storeContainerDocument = new ActiveXObject('htmlfile'); //創建對象storeContainerDocument.open(); //打開storeContainerDocument.write('<iframe id="store" src="/favicon.ico"></iframe>'); //添加storeContainerDocument.close(); //關閉// IE6 IE7 IE8 允許在 document 上插入元素，可以確保代碼的同步執行。var storeDocument = storeContainerDocument.getElementById('store').contentWindow.document;storeElement = storeDocument.appendChild(storeDocument.createElement('var'));} catch (e) {// 若創建失敗，則僅實現不能跨路徑的 userData 訪問。storeElement = document.documentElement;}// 添加行為。storeElement.addBehavior('#default#userData');//--------------------------------------------------[localStorage.getItem]/*** 從 localStorage 中讀取一條數據。* @name localStorage.getItem* @function* @param {string} key 數據名。* @returns {?string} 數據值。* 如果指定的數據名不存在，返回 null。*/localStorage.getItem = function(key) {storeElement.load(STORE_NAME);return storeElement.getAttribute(key);};//--------------------------------------------------[localStorage.setItem]/*** 在 localStorage 中保存一條數據。* @name localStorage.setItem* @function* @param {string} key 數據名，不能為空字符串。* @param {string} value 數據值。* @description* 注意：與原生的 localStorage 不同，IE6 IE7 的實現不允許 `~!@#$%^&*() 等符號出現在 key 中，可以使用 . 和 _ 符號，但不能以 . 和數字開頭。*/localStorage.setItem = function(key, value) {storeElement.load(STORE_NAME);storeElement.setAttribute(key, value);storeElement.save(STORE_NAME);};//--------------------------------------------------[localStorage.removeItem]/*** 從 localStorage 中刪除一條數據。* @name localStorage.removeItem* @function* @param {string} key 數據名。*/localStorage.removeItem = function(key) {storeElement.load(STORE_NAME);storeElement.removeAttribute(key);storeElement.save(STORE_NAME);};//--------------------------------------------------[localStorage.clear]/*** 清空 localStorage 中的所有數據。* @name localStorage.clear* @function*/localStorage.clear = function() {var attributes = Array.from(storeElement.XMLDocument.documentElement.attributes);storeElement.load(STORE_NAME);attributes.forEach(function(attribute) {storeElement.removeAttribute(attribute.name);});storeElement.save(STORE_NAME);};

總之就是先創建一個userData對象，然后使用它的操作封裝到localStorage的一些方法里面。

?

參考資料：

【OurJS】:?https://github.com/s79/OurJS/blob/gh-pages/src/browser.js

【推技術ActiveXobject("htmlfile") 長連接】:?http://www.cnblogs.com/my_life/articles/2749709.html

【JavaScript本地存儲實踐】:?http://www.css88.com/archives/3717

轉載于:https://www.cnblogs.com/cubika/p/3486094.html

總結

以上是生活随笔為你收集整理的HTML5本地存储localstorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。