阿倫學(xué)習(xí)html5 之 Local Storage (本地儲(chǔ)存)
一、瀏覽器存儲(chǔ)的發(fā)展歷程
本地存儲(chǔ)解決方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用網(wǎng)上的一張圖來看下目前主流的本地存儲(chǔ)方案：
Cookie： 在web中得到廣泛應(yīng)用，但局限性非常明顯，容量太小，有些站點(diǎn)會(huì)因?yàn)槌鲇诎踩目紤]而禁用cookie，cookie沒有想象中的那么安全，Cookie 的內(nèi)容會(huì)隨著頁面請(qǐng)求一并發(fā)往服務(wù)器。
Flash SharedObject： 使用的是kissy的store模塊來調(diào)用Flash SharedObject。Flash SharedObject的優(yōu)點(diǎn)是容量適中，基本上不存在兼容性問題，缺點(diǎn)是要在頁面中引入特定的swf和js文件，增加額外負(fù)擔(dān)，處理繁瑣；還是有部分機(jī)子沒有flash運(yùn)行環(huán)境。
Google Gears： Google的離線方案，已經(jīng)停止更新，官方推薦使用html5的localStorage方案。
User Data： 是微軟為IE專門在系統(tǒng)中開辟的一塊存儲(chǔ)空間，所以說只支持Windows+IE的組合，實(shí)際測(cè)試在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。在XP下，一般位于C:\Documents and Settings\用戶名\UserData，有些時(shí)候會(huì)在C:\Documents and Settings\用戶名\Application Data\Microsoft\Internet Explorer\UserData。在Vista下，位于C:\Users\用戶名\AppData\Roaming\Microsoft\Internet Explorer\UserData；單個(gè)文件的大小限制是128KB，一個(gè)域名下總共可以保存1024KB的文件，文件個(gè)數(shù)應(yīng)該沒有限制。在受限站點(diǎn)里這兩個(gè)值分別是64KB和640KB，所以如果考慮到各種情況的話，單個(gè)文件最好能控制64KB以下。
localStorage： 相對(duì)于上述本地存儲(chǔ)方案，localStorage有自身的優(yōu)點(diǎn)：容量大、易用、強(qiáng)大、原生支持；缺點(diǎn)是兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以請(qǐng)勿使用localStorage保存敏感信息）。
HTML5中l(wèi)ocalStorage瀏覽器兼容情況如下：
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：
- localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。
對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5 使用 JavaScript 來存儲(chǔ)和訪問數(shù)據(jù)。
localStorage 方法
localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
localStorage有三種設(shè)置和訪問本地存儲(chǔ)的方法。
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']="是個(gè)"; 11 document.write(localStorage['b']); 12 localStorage.setItem("c","好人"); 13 document.write(localStorage.getItem("c")); 14 } 15 </script> 16 </body> 17 18 </html>
效果（運(yùn)行之后，把設(shè)置的三行代碼去掉依然會(huì)顯示）：localStorage處理上面的賦值取值外還有下面幾個(gè)用法：
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //獲得多少鍵
localStorage.key() //獲得存儲(chǔ)的鍵內(nèi)容
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']="是個(gè)"; 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();//獲取儲(chǔ)存的間內(nèi)容 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>
posted on 2014-09-17 23:26 美妙絕倫 閱讀(324) 評(píng)論(0) 收藏 舉報(bào)
浙公網(wǎng)安備 33010602011771號(hào)