web存儲之webstorage
  • web存儲分類

  • 客戶端和服務端 

  • 認識web存儲

  • 隨著web應用的發展,是的客戶端存儲的用途越來越多,然而實現客戶端端存儲的方式也是越來越多樣化。最簡單最兼容的方式就是cookie,但作為真正的客戶端存儲cookie還是存在著許許多多的弊端的。同時,各種瀏覽器也有屬于自己的存儲方式。例如,IE6以及以上版本中可以使用userData Behavior,在Firefox中可以使用globalStorage,而在Flash插件還可以使用Flash Local Storage,但是這幾種方式存在著兼容性等方面的弊端,對于客戶端的存儲不屬于最好的方式。

  • 由于上述情況,html5中增加的了幾種新的存儲方式。web Database和web Storage?! ?/p>

  • 各種方式存儲之間的區別

  • cookie的優缺點

  • cookie工作原理

  • cookie作為一種客戶端存儲的方式,主要采用的是文本存儲。當有應用程序使用cookie的時候,服務器會將cookie發送到客戶端,客戶端進行保存。當用戶進行下次訪問時,會將客戶端存儲的cookie發送到服務器上面。在開發中,最典型的案例就是用來存儲用戶信息?! ?/p>

  • 優點

  • 簡單方便

  • 瀏覽器負責發送數據

  • 瀏覽器自己管理不同站點的數據,不容易發生數據的錯亂等情況  

  • 缺點 

  • 正如上面講到的cookie工作原理,我們通過服務端到客戶端,客戶端到服務器之間的通信。這樣造成有的不必要的帶寬消耗,同時也影響頁面的加載速度導致用戶的體驗性變差。

  • 存儲的數據大小限制,cookie只能存儲4kb大小的數據。

  • 安全性。cookie的數據以文本的方式存在客戶端上面,安全性很低,很容易造成數據被竊取。

  • 數量限制。多數瀏覽器可存儲的cookie數量為30-50個,也有的瀏覽器支持300個,而IE6只支持20個。

  • 數據完整性。當我們客戶端設置為最高安全級別的時候,我們的cookie會失效?!    ?/p>

  • web storage的優缺點

  • 認識webstorage

  • 這是html5新增的客戶端存儲數據的方式,提供了易于操作的api,只需要設置鍵值的方式即可。在每個用戶域下面存儲的數據大小在5M-10M。包含下面的sessionStorage和localStorage。同時,還包括web Database?!?/p>

  • 優點

  • 存儲的數據大小更大。

  • 存儲的數據保存在客戶端,不需要與瀏覽器進行通信,這樣可以減少我們的帶寬消耗。

  • 提供了豐富易用的API,使得開發者更加容易的開發。

  • 使用獨立的存儲空間。每個域下面都有獨立的存儲空間,每個空間完全獨立,可以避免數據的錯亂(這一點其實和cookie沒什么太大的區別)?!   ?/p>

  • 缺點

  • 由于每個域下面存儲的數據都是獨立的空間,我們在一個域下面是不能使用其他域下面的數據?!?/p>

  • 由于數據在沒有我們進行主動的刪除的情況下,存儲的數據是一直保存在的并且數據沒進行加密處理,很容易造成數據的竊取?!?/p>

  • localStorage

  • localStorage是一種沒有時間限制的存儲方式,除非我們自己主動的清除數據不然數據是不會丟失的?! ?/p>

  • sessionStorage 

  • sessionStorage是針對session的存儲方式,當我們瀏覽器或者操作窗口執行了關閉操作,sessionStorage存儲的數據將會丟失。同時只能在同一個會話的頁面中才能使用。

  • 瀏覽器支持    

  • IE8.0以上,Firefox3.0以上,opera10.5以上,chrome3.0以上,safari4.0以上。

  • 實例代碼

  • 檢測當前瀏覽器是否支持

  •     <script type="text/javascript">
            // 驗證當前的瀏覽器是否支持localStorage和sessionStorage
            window.onload = function(){
                if (window.localStorage && window.sessionStorage) {
                    alert("你的瀏覽器支持localStorage和sessionStorage");
                }
            }
        </script>

     

     

  • 基本使用 

  • 注意:localStorage和sessionStorage存儲的都是字符串對象?! ?/p>

  • 創建

  • <script type="text/javascript">
            // 創建均使用localStorage做示例,sessionStorage語法方式和localStorage是一樣的,localStorage(key, value);或者localStorage.key = "value";
            window.onload = function(){
                if (window.localStorage) {
                    localStorage.setItem("userName", "張三");
                }
            }
        </script>

     

        

  • 獲取存儲


  • <script type="text/javascript">
            // 可以直接使用localStorage.getItem(key);也可以使用localStorage.key;
            window.onload = function(){
                if (window.localStorage && window.sessionStorage) {
                    localStorage.setItem("userName", "張三");
                    alert(localStorage.getItem("userName"));
    }
            }
        </script>

     

      

  • 刪除存儲 


  • <script type="text/javascript">
            // localStorage.removeItem(key):根據鍵名刪除指定存儲,localStorage.clear():刪除指定所有存儲,當Storage對象為空時,也是可執行的。
            window.onload = function(){
                if (window.localStorage && window.sessionStorage) {
                    localStorage.setItem("userName", "hello,world!");
                   localStorage.removeItem("userName");
                    localStorage.clear();
                }
            }
        </script>

     

        

    來源:itnose

上一篇: 移動端的一些頭部標簽

下一篇: canvas學習總結三:繪制路徑-線段

分享到: 更多
北京pk赛车龙虎压法 北京pk拾前三 极速pk10免费稳赚技巧方案 申请彩票投注站需要什么手续办理 通比牛牛怎么赢 北京pk10直播网站 极速时时开奖大小 聚宝盆计划软件手机版app 重庆时时过年放假吗 靠赌博每天稳赚300元 中国体肓彩票官方网站 重庆时时彩坑人一幕 内蒙古时时快三走势图 七星彩百万位杀号预测 棋牌中心 广东时时公告