详解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);等方法，用来处理增、删、查。