標籤：style blog http color io os 使用 java ar
一、瀏覽器儲存的發展曆程本機存放區解決方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用網上的一張圖來看下目前主流的本機存放區方案：
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瀏覽器安全色情況如下：
HTML5 提供了兩種在用戶端儲存資料的新方法：
- localStorage - 沒有時間限制的資料存放區
- sessionStorage - 針對一個 session 的資料存放區
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是只有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。
對於不同的網站，資料存放區於不同的地區，並且一個網站只能訪問其自身的資料。
HTML5 使用 JavaScript 來儲存和訪問資料。
localStorage 方法localStorage 方法儲存的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。
localStorage有三種設定和訪問本機存放區的方法。
1 <html> 2 <head> 3 <title>html 5 之 localStorage</title> 4 </head> 5 <body> 6 <script type="text/javascript"> 7 if(window.localStorage){ 8 localStorage.a="阿倫" 9 document.write(localStorage.a);10 localStorage[‘b‘]="是個";11 document.write(localStorage[‘b‘]);12 localStorage.setItem("c","好人");13 document.write(localStorage.getItem("c")); 14 }15 </script>16 </body>17 18 </html>效果（運行之後，把設定的三行代碼去掉依然會顯示）：localStorage處理上面的賦值取值外還有下面幾個用法：
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //獲得多少鍵
localStorage.key() //獲得儲存的鍵內容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>html 5 之 localStorage</title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 //判斷瀏覽器是否支援localStorage 9 if(window.localStorage){10 11 localStorage.a="阿倫"12 document.write(localStorage.a);13 localStorage[‘b‘]="是個";14 document.write(localStorage[‘b‘]);15 localStorage.setItem("c","好人");16 document.write(localStorage.getItem("c")); 17 18 //localStorage.removeItem();//清除19 //localStorage.clear();//清除所有20 //localStorage.length// 擷取多少鍵21 //localStorage.key();//擷取儲存的間內容22 23 localStorage.removeItem("c");//清除24 document.write("<br/>長度"+localStorage.length);25 for(var i=0;i<localStorage.length;i++){26 27 document.write("<br/>"+localStorage.key(i)+"----->"+localStorage.getItem(localStorage.key(i)));28 29 }30 }31 </script>32 </body>33 34 </html>
阿倫學習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
