cookie、localStorage和sessionStorage 三者之間的區別以及儲存、獲取、刪除等使用方式

OBKoro1 發表於 2017-11-27
Cookie localStorage

寫在前面:

前端開發的時候,在網頁重新整理的時候,所有資料都會被清空,這時候就要用到本地儲存的技術,前端本地儲存的方式有三種,分別是cookie,localstorage和sessionStorage ,這是大家都知道的。本文的主要內容就是針對這三者的存放、獲取,區別、應用場景。有需要的朋友可以做一下參考,喜歡的可以點波贊,或者關注一下,希望可以幫到大家。

本文首發於我的個人blog:obkoro1.com

使用方式:

很多文件都是說了一大堆,後面用法都沒有說,先要學會怎麼用,不然後面的都是扯淡,所以這裡我先把使用方式弄出來。

cookie:

儲存cookie值:

    var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie; 複製程式碼

獲取指定名稱的cookie值

 function getCookie(name) { //獲取指定名稱的cookie值
// (^| )name=([^;]*)(;|$),match[0]為與整個正規表示式匹配的字串,match[i]為正規表示式捕獲陣列相匹配的陣列;
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie賦值給變數。複製程式碼

先貼這兩個最基礎的方法,文末有個demo裡面還有如何設定cookie過期時間,以及刪除cookie的、

localStorage和sessionStorage:

localStorage和sessionStorage所使用的方法是一樣的,下面以sessionStorage為栗子:

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//儲存資料
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//獲取全部資料
console.log(dataAll,'獲取全部資料');
var dataSession=sessionStorage.getItem(name);//獲取指定鍵名資料
var dataSession2=sessionStorage.sessionData;//sessionStorage是js物件,也可以使用key的方式來獲取值
 console.log(dataSession,dataSession2,'獲取指定鍵名資料');
sessionStorage.removeItem(name); //刪除指定鍵名資料
  console.log(dataAll,'獲取全部資料1');
 sessionStorage.clear();//清空快取資料:localStorage.clear();
  console.log(dataAll,'獲取全部資料2');  複製程式碼

使用方式,基本上就上面這些,其實也是比較簡單的。大家可以把這個copy到自己的編譯器裡面,或者文末有個demo,可以點開看看。

三者的異同:

上面的使用方式說好了,下面就嘮嘮三者之間的區別,這個問題其實很多大廠面試的時候也都會問到,所以可以注意一下這幾個之間的區別。

生命週期:

cookie:可設定失效時間,沒有設定的話,預設是關閉瀏覽器後失效

localStorage:除非被手動清除,否則將會永久儲存。

sessionStorage: 僅在當前網頁會話下有效,關閉頁面或瀏覽器後就會被清除。

存放資料大小:

cookie:4KB左右

localStorage和sessionStorage:可以儲存5MB的資訊。

http請求:

cookie:每次都會攜帶在HTTP頭中,如果使用cookie儲存過多資料會帶來效能問題

localStorage和sessionStorage:僅在客戶端(即瀏覽器)中儲存,不參與和伺服器的通訊

易用性:

cookie:需要程式設計師自己封裝,源生的Cookie介面不友好

localStorage和sessionStorage:源生介面可以接受,亦可再次封裝來對Object和Array有更好的支援

應用場景:

從安全性來說,因為每次http請求都會攜帶cookie資訊,這樣無形中浪費了頻寬,所以cookie應該儘可能少的使用,另外cookie還需要指定作用域,不可以跨域呼叫,限制比較多。但是用來識別使用者登入來說,cookie還是比stprage更好用的。其他情況下,可以使用storage,就用storage。

storage在儲存資料的大小上面秒殺了cookie,現在基本上很少使用cookie了,因為更大總是更好的,哈哈哈你們懂得。

localStorage和sessionStorage唯一的差別一個是永久儲存在瀏覽器裡面,一個是關閉網頁就清除了資訊。localStorage可以用來誇頁面傳遞引數,sessionStorage用來儲存一些臨時的資料,防止使用者重新整理頁面之後丟失了一些引數。

瀏覽器支援情況:

localStorage和sessionStorage是html5才應用的新特性,可能有些瀏覽器並不支援,這裡要注意。

cookie、localStorage和sessionStorage 三者之間的區別以及儲存、獲取、刪除等使用方式

cookie的瀏覽器支援沒有找到,可以通過下面這段程式碼來判斷所使用的瀏覽器是否支援cookie:

if(navigator.cookieEnabled) {
  alert("你的瀏覽器支援cookie功能");//提示瀏覽器支援cookie  
} else {
  alert("你的瀏覽器不支援cookie");//提示瀏覽器不支援cookie   }複製程式碼

資料存放處:

Cookie、localStorage、sessionStorage資料存放處
Cookie、localStorage、sessionStorage資料存放處

番外:各瀏覽器Cookie大小、個數限制。

cookie 使用起來還是需要小心一點,有興趣的可以看一下這個連結

demo連結

把上面的demo程式碼,上傳到github上面了,有需要的小夥伴們,可以看一下。傳送門

後話

最後要說的是:不要把什麼資料都放在 Cookie、localStorage 和 sessionStorage中,畢竟前端的安全性這麼低。只要開啟控制檯就可以任意的修改 Cookie、localStorage 和 sessionStorage的資料了。涉及到金錢或者其他比較重要的資訊,還是要存在後臺比較好。

最後:如需轉載,請放上原文連結並署名。碼字不易,感謝支援!本人寫文章本著交流記錄的心態,寫的不好之處,不撕逼,但是歡迎指點。然後就是希望看完的朋友點個喜歡,也可以關注一下我。
blog網站 and 掘金個人主頁

以上2017.11.25

參考連結:

HTML 5 Web 儲存
localStorage和sessionStorage詳解
詳說 Cookie, LocalStorage 與 SessionStorage