localStorage、sessionStorage、Cookie的區別及用法

localStorage、sessionStorage、Cookie的區別及用法

webstorage

webstorage是本地存儲，存儲在客戶端，包括localStorage和sessionStorage。

localStorage

localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。

sessionStorage

sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持。

localStorage和sessionStorage使用時使用相同的API：

localStorage.setItem("key","value");//以「key」爲名稱存儲一個值「value」

    localStorage.getItem("key");//獲取名稱爲「key」的值

    localStorage.removeItem("key");//刪除名稱爲「key」的信息。

    localStorage.clear();​//清空localStorage中全部信息

簡單的舉個例子來了解一下他們的用法

仿一下京東官網頂部的廣告關閉，效果爲第一次進入官網會出現廣告，而後點擊關閉，刷新網頁不會再顯示廣告，可是當清除localStorage存入的數據，刷新網頁會再顯示廣告。
html代碼

<div class="header">
    <div class="header-a">
        <a href=""></a>
        <i class="close">x</i>
    </div>
</div>

css代碼

.header{
    width:100%;
    height:80px;
    background:#000;
}
.header-a{
    width:1190px;
    margin:0 auto;
    position:relative;
    background:url("images/1.jpg") no-repeat;
}
.header-a a{
    width:100%;
    height:80px;
    display:block;
}
.close{
    cursor:pointer;
    color:#fff;
    position:absolute;
    top:5px;
    right:5px;
    background:rgb(129, 117, 117);
    width: 20px;
    text-align: center;
    line-height: 20px;
}

js代碼

//localStorage方法
<script src="../js/jquery.min.js"></script>
function haxi(){
        //判斷localStorage裏有沒有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //點擊關閉隱藏圖片存取數據
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })
    }
    haxi();

做用域不一樣

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

Cookie

生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不一樣），通常不能超過20個。與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。但Cookie須要程序員本身封裝，源生的Cookie接口不友好(http://www.jb51.net/article/6...
)。
js代碼

//Cookie方法
<script src="../js/cookie.js"></script>//Cookie函數本身封裝引入
function haxi(){
        if(getCookie("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            setCookie("isClose", "1","s10");
        })
    }
    haxi();

cookie的優勢：具備極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術，減小cookie被破解的可能性。
3.只有在cookie中存放不敏感的數據，即便被盜取也不會有很大的損失。
4.控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者極可能拿到的就   是一個過時的cookie。

cookie的缺點：

1.cookie的長度和數量的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB。不然會被截掉。
2.安全性問題。若是cookie被人攔掉了，那我的就能夠獲取到全部session信息。加密的話也不起什麼做用。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼做用。

localStorage、sessionStorage、Cookie共同點：都是保存在瀏覽器端，且同源的。