HTML5的本地存儲是大勢所趨，如果僅存儲在內存中，則是sessionStorage，他們的語法都是一樣，僅僅是一個存儲在本地文件系統中，另一個存儲在內存中（隨著瀏覽器的關閉而消失），其語句如下：

localStorage.setItem('a', 'xxxxxx'); // 設置 localStorage.getItem('a'); // 獲取 localStorage.removeItem('a'); // 刪除

下面說說有關localStorage和sessionStorage的特性。

1、存儲格式

僅僅存儲字符串類型的對象（雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。

2、生命周期

在數據存儲的時效性上，localStorage并不會像cookie那樣可以設置數據存活的時限。也就是說，只要用戶不主動刪除，localStorage存儲的數據將會永久存在。

3、存儲位置

當然，對于localStorage數據的存儲，是存在于本地的文件系統中的，例如，對于chrome來說，localStorage數據的存儲位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對于其他4大瀏覽器，大家可以自行查找進行查看。

4、數據共享

不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬于相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。

5、兼容性

可以看到，除IE外的其他瀏覽器很早的版本都支持了，對于IE低版本系列的瀏覽器，我們需要一個兼容方案來處理。

微軟在IE5.0以后，自定義了一種持久化用戶數據的概念userData，這種存儲方式只有IE瀏覽器自己支持。來看看其如何操作——

(function(win) {// 對于IE，且不支持localStorage的瀏覽器// 即針對IE6/7if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {var localFileName = "_simulateLocalStorage", expires = 365,formField = null;// 設置有效期為365天var expire = new Date();expire.setDate(expires + expire.getDate());formField = document.createElement("input");formField.type = "hidden";formField.addBehavior('#default#userData');document.body.appendChild(formField);var storage = {setItem : function(key, value) {formField.load(localFileName);formField.setAttribute(key, value);formField.save(localFileName);},getItem : function(key) {formField.load(localFileName);return formField.getAttribute(key);},removeItem : function(key) {formField.load(localFileName);formField.removeAttribute(key);formField.save(localFileName);},clear : function() {formField.load(localFileName);var d = new Date();d.setDate(d.getDate() - 1);formField.expires = d.toUTCString();formField.save(localFileName);}};win["localStorage"] = storage;} })(window);

這里僅僅是對IE兼容性的簡單包裝，下面的鏈接給出非常完善的針對localStorage兼容性的解決方案。

https://github.com/machao/localStorage

6、存儲大小

對于HTML5的localStorage而言，其大小支持為5M（當然，各瀏覽器的大小差異還是有的）。對于IE的userData，用戶數據的每個域最大為64KB。

7、應用場景

建議不要使用localStorage方式存儲敏感信息，哪怕這些信息進行過加密。另外，對身份驗證數據使用localStorage進行存儲還不太成熟。我們知道，通?？梢酝ㄟ^xss漏洞來獲取到Cookie，然后用這個Cookie進行身份驗證登錄，但是瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防御機制，一旦出現XSS漏洞，那么存儲在localStorage里的數據就極易被獲取到。

?

參考：

1> 《Web前端黑客技術揭秘》

2> github-machao-localStorage

3>?HTML5 LocalStorage 本地存儲

4>?localStorage、sessionStorage用法總結

?

?轉自?http://www.cnblogs.com/jinguangguo/p/4083919.html

?

轉載于:https://www.cnblogs.com/qiangspecial/p/4285072.html

總結

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

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