web儲存之webstorage

標籤：load   hello   是的   執行個體代碼   應用程式   alert   方式   win   use   

• web存放裝置分類
  
  • 用戶端和服務端　
• 認識web儲存
  • 隨著web應用的發展，是的用戶端儲存的用途越來越多，然而實現用戶端端儲存的方式也是越來越多樣化。最簡單最相容的方式就是cookie，但作為真正的用戶端儲存cookie還是存在著許許多多的弊端的。同時，各種瀏覽器也有屬於自己的儲存方式。例如，IE6以及以上版本中可以使用userData Behavior，在Firefox中可以使用globalStorage，而在Flash外掛程式還可以使用Flash Local Storage，但是這幾種方式存在著相容性等方面的弊端，對於用戶端的儲存不屬於最好的方式。
  • 由於上述情況，html5中增加的了幾種新的儲存方式。web Database和web Storage。　　
• 各種方式儲存之間的區別
  • cookie的優缺點
    • cookie工作原理
      • cookie作為一種用戶端儲存的方式，主要採用的是文本儲存。當有應用程式使用cookie的時候，伺服器會將cookie發送到用戶端，用戶端進行儲存。當使用者進行下次訪問時，會將用戶端儲存的cookie發送到伺服器上面。在開發中，最典型的案例就是用來儲存使用者資訊。　　
    • 優點
      • 簡單方便
      • 瀏覽器負責發送資料
      • 瀏覽器自己管理不同網站的資料，不容易發生資料的錯亂等情況　　
    • 缺點　
      • 正如上面講到的cookie工作原理，我們通過服務端到用戶端，用戶端到伺服器之間的通訊。這樣造成有的不必要的頻寬消耗，同時也影響頁面的載入速度導致使用者的體驗性變差。
      • 儲存的資料大小限制，cookie只能儲存4kb大小的資料。
      • 安全性。cookie的資料以文本的方式存在用戶端上面，安全性很低，很容易造成資料被竊取。
      • 數量限制。多數瀏覽器可儲存的cookie數量為30-50個，也有的瀏覽器支援300個，而IE6隻支援20個。
      • 資料完整性。當我們用戶端設定為最高安全層級的時候，我們的cookie會失效。　　　　　
  • web storage的優缺點
    • 認識webstorage
      • 這是html5新增的用戶端儲存資料的方式，提供了易於操作的api，只需要設定索引值的方式即可。在每個使用者域下面儲存的資料大小在5M-10M。包含下面的sessionStorage和localStorage。同時，還包括web Database。　
    • 優點
      • 儲存的資料大小更大。
      • 儲存的資料儲存在用戶端，不需要與瀏覽器進行通訊，這樣可以減少我們的頻寬消耗。
      • 提供了豐富易用的API，使得開發人員更加容易的開發。
      • 使用獨立的儲存空間。每個域下面都有獨立的儲存空間，每個空間完全獨立，可以避免資料的錯亂（這一點其實和cookie沒什麼太大的區別）。　　　　
    • 缺點
      • 由於每個域下面儲存的資料都是獨立的空間，我們在一個域下面是不能使用其他域下面的資料。　
      • 由於資料在沒有我們進行主動的刪除的情況下，儲存的資料是一直儲存在的並且資料沒進行加密處理，很容易造成資料的竊取。　
    • localStorage
      • localStorage是一種沒有時間限制的儲存方式，除非我們自己主動的清除資料不然資料是不會丟失的。　　
    • 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儲存的都是字串對象。　　
    • 建立

      • <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>

           

          　　　　

web儲存之webstorage