原文地址

瀏覽器支持情況

webStorage.png

webStorage是什么？

Method of storing data locally like cookies, but for larger amounts of data (sessionStorage and localStorage, used to fall under HTML5).

一種保存數(shù)據(jù)在本地的方法像cookies一樣，但用于存儲大量的數(shù)據(jù)（HTML5標準下的sessionStorage 和 localStorage）

webStorage提供了localStorage 和 sessionStorage 兩個api。

• localStorage

本地存儲，除非被顯示的刪除，否則一直存在。數(shù)據(jù)大小為5MB。

• sessionStorage

只在當前會話下存在，關(guān)閉瀏覽器或頁面后被清除。數(shù)據(jù)大小為5MB。使用方法與localStorage。

使用

localStorage Api

• setItem(key,value)

• getItem(key)

• removeItem(key)

• clear()

• length

• key(n) 返回第n個key的名稱

var ls=window.localStorage;

// 保存數(shù)據(jù)
// 數(shù)據(jù)以string類型的保存在本地
ls.setItem('one',1);
// 取出數(shù)據(jù)
ls.getItem('one');//1
// 刪除某個鍵值對
ls.removeItem('one');
// 刪除全部
ls.clear();
// 返回本地存儲的個數(shù)
ls.length;

sessionStorage Api

api和使用方法與localStorage相同

sessionStorage 、localStorage 和 cookie 之間的區(qū)別

    cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
    cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。
    sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

    存儲大?。?        cookie數(shù)據(jù)大小不能超過4k。
        sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

    有期時間：
        localStorage    存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
        sessionStorage  數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。
        cookie          設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉