不管是筆試還是面試相信大家都會經常遇到問Cookie、LocalStorage、SessionStorage 這三個不同的,什麼不說先上一波圖先:
針對他們大小之分應用場景也有不同:
因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息,所以 Cookie 當然是能精簡就精簡啦,比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶,服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼,下次只要讀取這個值就可以判斷當前用戶是否登錄啦。localStorage相對cookie大的多,所以可以用來做購物車,h5小游戲,web應用等。
注意:不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候,需要時刻注意是否有代碼存在 XSS(什麼是xxs下回分解) 注入的風險。因為只要打開控制台,你就隨意修改它們的值,也就是說如果你的網站中有 XSS 的風險,它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。
說了他們的好和不好後是時候表演正真技術了(js如何操作他們):
JS設置cookie:
假設在A頁面中要保存變量username的值("chentutu")到cookie中,key值為name,則相應的JS代碼為:
document.cookie="name="+username;
JS讀取cookie:
var username=document.cookie.split(";")[0].split("=")[1];
這是最簡單的操作cookie的方法,下面代碼給大家展示一下cookie的基本操作:
//寫cookies function setCookie(name,value,Days) { var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } //讀取cookies function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } //讀取cookie方法二: function getCookie2(key) { var arr1 = document.cookie.split('; '); for (var i = 0; i < arr1.length; i++) { var arr2 = arr1[i].split('='); if (arr2[0] == key) { return unescape(arr2[1]); } } } //刪除cookies 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(); }
localstorage提供了:localStorage.getItem(name);localStorage.setItem(name, value);localStorage.removeItem(name);等方法,用來處理增、刪、查。