详解Cookie、LocalStorage、SessionStorage
不管是笔试还是面试相信大家都会经常遇到问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);等方法,用来处理增、删、查。