localStorage,sessionStorage和cookie的區別及使用

Mr-Wanter 發表於 2018-10-01
Cookie localStorage

1、概述

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間儲存資料。
sessionStorage、localStorage、cookie都是在瀏覽器端儲存的資料。

2、共同點

都是儲存在瀏覽器端,且同源的。

3、區別

  1. 傳遞方式:
    cookie在瀏覽器和伺服器間來回傳遞;
    sessionStorage和localStorage不會自動把資料發給伺服器,僅在本地儲存;
  2. 儲存大小:
    localStorage<=5M;
    sessionStorage<=5M;
    cookie<4K;(ie核心瀏覽器佔主流地位,且ie6仍佔有相當大的市場份額,所以在程式中應當使用少於20個cookie,且不大於4k)
  3. 有效性:
    localStorage:始終有效,視窗或瀏覽器關閉也一直儲存,因此用作持久資料;
    sessionStorage:僅在當前瀏覽器視窗關閉前有效,不能持久保持;
    cookie:只在設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉也不會消失;
  4. 共享機制:
    localStorage :在所有同源視窗中都是共享的;
    sessionStorage:同時“獨立”開啟的不同視窗,即使是同一頁面,sessionStorage物件也是不同的;
    cookie:在所有同源視窗中都是共享的
  5. 瀏覽器支援:
    sessionStorage的瀏覽器最小版本:IE8、Chrome 5。
  6. 使用場景
    cookie:儲存回話資訊
    localStorage:持久儲存的資料
    sessionStorage:擁有獨立特性的資料

4、JS中使用

  1. localStorage

localStorage.setItem("key","value");//儲存變數名為key,值為value的變數
localStorage.key = "value"//儲存變數名為key,值為value的變數

localStorage.getItem("key");//獲取儲存的變數key的值
localStorage.key;//獲取儲存的變數key的值

localStorage.removeItem("key")//刪除變數名為key的儲存變數

     2.sessionStorage

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值
sessionStorage['testKey'] = '這是一個測試的value值';

essionStorage.getItem('testKey'); // => 返回testKey對應的值
sessionStorage['testKey']; // => 這是一個測試的value值

sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 物件中移除。
sessionStorage.clear() //清除 sessionStorage 物件所有的項。

sessionStorage.length //返回一個整數,表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。

      3.cookie

//寫cookies
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

//讀取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

//刪除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}