標籤：解決方案 瀏覽器 運行環境 google cookie
本文為 兄弟連IT教育 機構官方 HTML5培訓 教程，主要介紹：HTML5移動開發之路（19）——HTML5 Local Storage（本機存放區）
一、瀏覽器儲存的發展曆程
本機存放區解決方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用網上的一張圖來看下目前主流的本機存放區方案：
650) this.width=650;" src="http://img.blog.csdn.net/20140113123717921?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />
Cookie： 在web中得到廣泛應用，但局限性非常明顯，容量太小，有些網站會因為出於安全的考慮而禁用cookie，cookie沒有想象中的那麼安全，Cookie 的內容會隨著頁面請求一併發往伺服器。
Flash SharedObject： 使用的是kissy的store模組來調用Flash SharedObject。Flash SharedObject的優點是容量適中，基本上不存在相容性問題，缺點是要在頁面中引入特定的swf和js檔案，增加額外負擔，處理繁瑣；還是有部分機子沒有flash運行環境。
Google Gears： Google的離線方案，已經停止更新，官方推薦使用HTML5的localStorage方案。
User Data： 是微軟為IE專門在系統中開闢的一Block Storage空間，所以說只支援Windows+IE的組合，實際測試在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。在XP下，一般位於C:\Documents and Settings\使用者名稱\UserData，有些時候會在C:\Documents and Settings\使用者名稱\Application Data\Microsoft\Internet Explorer\UserData。在Vista下，位於C:\Users\使用者名稱\AppData\Roaming\Microsoft\Internet Explorer\UserData；單個檔案的大小限制是128KB，一個網域名稱下總共可以儲存1024KB的檔案，檔案個數應該沒有限制。在受限網站裡這兩個值分別是64KB和640KB，所以如果考慮到各種情況的話，單個檔案最好能控制64KB以下。
localStorage： 相對於上述本機存放區方案，localStorage有自身的優點：容量大、易用、強大、原生支援；缺點是相容性差些（chrome, safari, firefox，IE 9，IE8都支援 localStorage，主要是IE8以下版本不支援）、安全性也差些（所以請勿使用localStorage儲存敏感資訊）。
HTML5中localStorage瀏覽器安全色情況如下：
650) this.width=650;" src="http://img.blog.csdn.net/20140113125010078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />
二、HTML5 localStorage操作使用
在HTML5中，本機存放區是一個window的屬性，包括localStorage和 sessionStorage，從名字應該可以很清楚的辨認二者的區別，前者是一直存在本地的，後者只是伴隨著session，視窗一旦關閉就沒了。二者用法完全相同。
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是只有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。
對於不同的網站，資料存放區於不同的地區，並且一個網站只能訪問其自身的資料。
HTML5 使用 JavaScript 來儲存和訪問資料。
localStorage 方法儲存的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。localStorage有三種設定和訪問本機存放區的方法。
localStorage.t1 ="大碗幹拌";
localStorage["t2"]="HTML5";
localStorage.setItem("t3","http://blog.csdn.NET/dawanganban");
localStorage.t1;
localStorage["t2"];
localStorage.getItem("t3");
[html] view plain copy
print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判斷瀏覽器是否支援本機存放區
if(window.localStorage){
localStorage.t1="大碗幹拌";
document.write(localStorage.t1);
localStorage[‘t2‘]="<br/>hello word"
document.write(localStorage.t2);
localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3);
}else{
alert("你的瀏覽器不支援");
}
</script>
</body>
</html>
將上面三行賦值的代碼注釋掉，會探索資料依然能顯示到瀏覽器上。
650) this.width=650;" src="http://img.blog.csdn.net/20140113130110578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />
localStorage處理上面的賦值取值外還有下面幾個用法：
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //獲得多少鍵
localStorage.key() //獲得儲存的鍵內容
[html] view plain copy
print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="urf-8"/>
</head>
<body>
<script type="text/javascript">
//判斷瀏覽器是否支援本機存放區
if(window.localStorage){
//先清除一下
localStorage.clear();
localStorage.t1="大碗幹拌";
document.write(localStorage.t1);
localStorage[‘t2‘]="<br/>hello word"
document.write(localStorage.t2);
localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");
document.write(localStorage.t3);
//清除t2 全部清除用clear
localStorage.removeItem("t2");
for(var i=0;i<localStorage.length;i++){
document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));
}
}else{
alert("你的瀏覽器不支援");
}
</script>
</body>
</html>
650) this.width=650;" src="http://img.blog.csdn.net/20140113131559890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />
HTML5移動開發之路（19）——HTML5 Local Storage（本機存放區）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
