web存儲之webstorage

• cookie工作原理
  • cookie作為一種客戶端存儲的方式，主要採用的是文本存儲。當有應用程式使用cookie的時候，伺服器會將cookie發送到客戶端，客戶端進行保存。當用戶進行下次訪問時，會將客戶端存儲的cookie發送到伺服器上面。在開發中，最典型的案例就是用來存儲用戶信息。　　
• 優點
  • 簡單方便
  • 瀏覽器負責發送數據
  • 瀏覽器自己管理不同站點的數據，不容易發生數據的錯亂等情況　　
• 缺點　
  • 正如上面講到的cookie工作原理，我們通過服務端到客戶端，客戶端到伺服器之間的通信。這樣造成有的不必要的帶寬消耗，同時也影響頁面的載入速度導致用戶的體驗性變差。
  • 存儲的數據大小限制，cookie只能存儲4kb大小的數據。
  • 安全性。cookie的數據以文本的方式存在客戶端上面，安全性很低，很容易造成數據被竊取。
  • 數量限制。多數瀏覽器可存儲的cookie數量為30-50個，也有的瀏覽器支持300個，而IE6只支持20個。
  • 數據完整性。當我們客戶端設置為最高安全級別的時候，我們的cookie會失效。　　　　　

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