站長資訊網-
web存儲分類
-
客戶端和服務端
-
認識web存儲
-
隨著web應用的發(fā)展，是的客戶端存儲的用途越來越多，然而實現(xiàn)客戶端端存儲的方式也是越來越多樣化。最簡單最兼容的方式就是cookie，但作為真正的客戶端存儲cookie還是存在著許許多多的弊端的。同時，各種瀏覽器也有屬于自己的存儲方式。例如，IE6以及以上版本中可以使用userData Behavior，在Firefox中可以使用globalStorage，而在Flash插件還可以使用Flash Local Storage，但是這幾種方式存在著兼容性等方面的弊端，對于客戶端的存儲不屬于最好的方式。
-
由于上述情況，html5中增加的了幾種新的存儲方式。web Database和web Storage?！ ?/p>
-
各種方式存儲之間的區(qū)別
-
認識webstorage
-
優(yōu)點
-
缺點
-
localStorage
-
sessionStorage
-
瀏覽器支持
-
這是html5新增的客戶端存儲數據的方式，提供了易于操作的api，只需要設置鍵值的方式即可。在每個用戶域下面存儲的數據大小在5M-10M。包含下面的sessionStorage和localStorage。同時，還包括web Database?！?/p>
-
存儲的數據大小更大。
-
存儲的數據保存在客戶端，不需要與瀏覽器進行通信，這樣可以減少我們的帶寬消耗。
-
提供了豐富易用的API，使得開發(fā)者更加容易的開發(fā)。
-
使用獨立的存儲空間。每個域下面都有獨立的存儲空間，每個空間完全獨立，可以避免數據的錯亂（這一點其實和cookie沒什么太大的區(qū)別）?！ ?/p>
-
由于每個域下面存儲的數據都是獨立的空間，我們在一個域下面是不能使用其他域下面的數據?！?/p>
-
由于數據在沒有我們進行主動的刪除的情況下，存儲的數據是一直保存在的并且數據沒進行加密處理，很容易造成數據的竊取?！?/p>
-
localStorage是一種沒有時間限制的存儲方式，除非我們自己主動的清除數據不然數據是不會丟失的?！ ?/p>
-
sessionStorage是針對session的存儲方式，當我們?yōu)g覽器或者操作窗口執(zhí)行了關閉操作，sessionStorage存儲的數據將會丟失。同時只能在同一個會話的頁面中才能使用。
-
IE8.0以上，F(xiàn)irefox3.0以上，opera10.5以上，chrome3.0以上，safari4.0以上。
-
cookie工作原理
-
優(yōu)點
-
缺點
-
cookie作為一種客戶端存儲的方式，主要采用的是文本存儲。當有應用程序使用cookie的時候，服務器會將cookie發(fā)送到客戶端，客戶端進行保存。當用戶進行下次訪問時，會將客戶端存儲的cookie發(fā)送到服務器上面。在開發(fā)中，最典型的案例就是用來存儲用戶信息?！ ?/p>
-
簡單方便
-
瀏覽器負責發(fā)送數據
-
瀏覽器自己管理不同站點的數據，不容易發(fā)生數據的錯亂等情況
-
正如上面講到的cookie工作原理，我們通過服務端到客戶端，客戶端到服務器之間的通信。這樣造成有的不必要的帶寬消耗，同時也影響頁面的加載速度導致用戶的體驗性變差。
-
存儲的數據大小限制，cookie只能存儲4kb大小的數據。
-
安全性。cookie的數據以文本的方式存在客戶端上面，安全性很低，很容易造成數據被竊取。
-
數量限制。多數瀏覽器可存儲的cookie數量為30-50個，也有的瀏覽器支持300個，而IE6只支持20個。
-
數據完整性。當我們客戶端設置為最高安全級別的時候，我們的cookie會失效?！ ?/p>
-
cookie的優(yōu)缺點
-
web storage的優(yōu)缺點
-
實例代碼
-
注意：localStorage和sessionStorage存儲的都是字符串對象?！ ?/p>
-
創(chuàng)建
-
獲取存儲
-
刪除存儲
-
<script type="text/javascript">// 創(chuàng)建均使用localStorage做示例，sessionStorage語法方式和localStorage是一樣的，localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) { localStorage.setItem("userName", "張三");} }</script> -
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "張三""userName"</script>
-
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "hello,world!"</script>
-
檢測當前瀏覽器是否支持
-
<script type="text/javascript">// 驗證當前的瀏覽器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的瀏覽器支持localStorage和sessionStorage"); } }</script>
