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

秒客网

详解Cookie、LocalStorage、SessionStorage

相关文章