前端存储浅谈——cookie、sessionStorage、localStorage

cookie

存于客户端，由于http协议是无状态的，只要客户端与服务端数据交换完，就会断掉链接，如果再请求 就再次链接，而服务器是无法保存这种链接的状态，只有不停地链接、断链接，所以需要cookie来做一个身份认证，再次请求的时候服务器会根据这个身份id进行用户判断。

但要注意cookie是不可跨域的，他会根据域名来区分是向哪个服务器发送数据。

其次，cookie不能存一些敏感信息， 因为通过浏览器获取cookie很方便，很容易泄露一些个人信息，如果想存 最好是对数据进行加密

cookie的一些api,通过自己封装的例子看

var Cookie = {
//分装获取的方法 Cookie.get('name')
    get: function(key){
        var cookiestr = document.cookie; //读取本地的cookie
        var list = cookiestr.split("; ");
        for(var i=0; i<list.length; i++){
            var kvs = list[i].split("=");
            if(kvs[0]==key) {
                return kvs[1];     //查询是否存在 存在返回 否则返回null
            }
        }
        return null;
    },
    //封装写入cookie的方法 包括内容、有效期、路径，是否安全传输
    set: function(key,value,expires,path){
        if( (typeof expires == "number") || (typeof expires == "string")) {
        expires = Number(expires);
        if(isNaN(expires)) {
            expires = undefined;
        } else {
            var d = new Date();
            d.setDate(d.getDate()+expires);
            expires = d;
        }
    } 
    if( !(expires instanceof Date) && typeof expires == "object") {
        expires = undefined;
    }
//cookie的写入 用json字符串形式 调用的时候用Cookie.set('name','zhangsan','/')
    document.cookie = key+"="+value+";" + (expires?"expires="+expires+";":"") + (path?"path="+path+";":"");
    }
}

HTML5提供了两种本地存储的方式 sessionStorage 和 localStorage

sessionStorage

是用户从打开回话窗到关闭会话窗这一段时间有效，关闭之后存的数据就会被删除

sessionStorage.setItem('name','alice');
var username = sessionStorage.getItem('name')

sessionStorage.remove('name')
sessionStorage.clear()

localStorage 会一直存在浏览器中 除非人工清除 方法同上

其次，我们可以对localstorage和sessionStorage的属性值进行遍历

var storage = window.localStorage;
var length = storage.length;
for(let i=-;i<length;i++){
    console.log(storage.key(i),storage.getItem(key))
}

cookie 和 localStorage sessionStorage 区别

三者都存在客户端 而且同源，同协议 同域名 同端口

cookie会在http请求中携带，会在服务器和客户端间传递，所以cookie会有大小限制，不能超过4k，而且存在在设定的path下。

sessionStorage和localStorage只会存在本地，大小要比cookie大，其中sessionStorage是仅在当前的会话窗口有效，不是所有窗口都可以共享数据的。其它两个是真个浏览器都可以数据共享。