寫在前面：
前端開發的時候，在網頁重新整理的時候，所有資料都會被清空，這時候就要用到本地儲存的技術，前端本地儲存的方式有三種，分別是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的瀏覽器支援沒有找到，可以通過下面這段程式碼來判斷所使用的瀏覽器是否支援cookie：
if(navigator.cookieEnabled) {
alert("你的瀏覽器支援cookie功能");//提示瀏覽器支援cookie
} else {
alert("你的瀏覽器不支援cookie");//提示瀏覽器不支援cookie }複製程式碼資料存放處：
番外：各瀏覽器Cookie大小、個數限制。
cookie 使用起來還是需要小心一點，有興趣的可以看一下這個連結。
demo連結
把上面的demo程式碼，上傳到github上面了，有需要的小夥伴們，可以看一下。傳送門
後話
最後要說的是：不要把什麼資料都放在 Cookie、localStorage 和 sessionStorage中，畢竟前端的安全性這麼低。只要開啟控制檯就可以任意的修改 Cookie、localStorage 和 sessionStorage的資料了。涉及到金錢或者其他比較重要的資訊，還是要存在後臺比較好。
最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
blog網站 and 掘金個人主頁
以上2017.11.25
參考連結：
HTML 5 Web 儲存
localStorage和sessionStorage詳解
詳說 Cookie, LocalStorage 與 SessionStorage