WebStorage

使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。早些時(shí)候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速，這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上。它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

Web Storage的目的是為了克服由cookie帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí)，無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage的兩個(gè)主要目標(biāo)是：

• 提供一種在cookie之外存儲會話數(shù)據(jù)的途徑。
• 提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制。

Web Storage又分為兩種： sessionStorage 和localStorage ，即這兩個(gè)是Storage的一個(gè)實(shí)例。從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地。其API提供的方法有以下幾種：

    - setItem (key, value) ——  保存數(shù)據(jù)，以鍵值對的方式儲存信息。

    - getItem (key) ——  獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。

    - removeItem (key) ——  刪除單個(gè)數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。

    - clear () ——  刪除所有的數(shù)據(jù)

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

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存儲數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會讓數(shù)據(jù)消失，除非主動的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性，可以查看其有多少條記錄的數(shù)據(jù)。使用方法如下：

     var storage = null;
         if(window.localStorage){              //判斷瀏覽器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //調(diào)用setItem方法，存儲數(shù)據(jù)
            alert(storage.getItem("name"));     //調(diào)用getItem方法，彈框顯示 name 為 Rick
            storage.removeItem("name");     //調(diào)用removeItem方法，移除數(shù)據(jù)
            alert(storage.getItem("name"));   //調(diào)用getItem方法，彈框顯示 name 為 null
 
         }

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

sessionStorage

sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的。需要注意的有以下幾點(diǎn)：

• 頁面刷新不會消除數(shù)據(jù);
• 只有在當(dāng)前頁面打開的鏈接，才可以訪sessionStorage的數(shù)據(jù)；
• 使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內(nèi)部的數(shù)據(jù);