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