WebStorage是什麼？

WebStorage

使用HTML5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速，這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上。它也可以儲存大量的資料，而不影響網站的效能。資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

Web Storage的目的是為了克服由cookie帶來的一些限制，當資料需要被嚴格控制在客戶端上時，無須持續地將資料發回伺服器。Web Storage的兩個主要目標是：

• 提供一種在cookie之外儲存會話資料的途徑。
• 提供一種儲存大量可以跨會話存在的資料的機制。

Web Storage又分為兩種： sessionStorage 和localStorage ，即這兩個是Storage的一個例項。從字面意思就可以很清楚的看出來，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地。其API提供的方法有以下幾種：

    - setItem (key, value) ——  儲存資料，以鍵值對的方式儲存資訊。

    - getItem (key) ——  獲取資料，將鍵值傳入，即可獲取到對應的value值。

    - removeItem (key) ——  刪除單個數據，根據鍵值移除對應的資訊。

    - clear () ——  刪除所有的資料

    - key (index) —— 獲取某個索引的key
 

localStorage

localStorage的生命週期是永久性的。假若使用localStorage儲存資料，即使關閉瀏覽器，也不會讓資料消失，除非主動的去刪除資料，使用的方法如上所示。localStorage有length屬性，可以檢視其有多少條記錄的資料。使用方法如下：

     var storage = null;
         if(window.localStorage){              //判斷瀏覽器是否支援localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //呼叫setItem方法，儲存資料
            alert(storage.getItem("name"));     //呼叫getItem方法，彈框顯示 name 為 Rick
            storage.removeItem("name");     //呼叫removeItem方法，移除資料
            alert(storage.getItem("name"));   //呼叫getItem方法，彈框顯示 name 為 null
 
         }
 

localStorage 相對sessionStorage簡單一點，需要注意的地方不是很多。

sessionStorage

sessionStorage 的生命週期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其資料一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的。需要注意的有以下幾點：

• 頁面重新整理不會消除資料;
• 只有在當前頁面開啟的連結，才可以訪sessionStorage的資料；
• 使用window.open開啟頁面和改變localtion.href方式都可以獲取到sessionStorage內部的資料;