数据存储之HTTP Cookie

补充说明:

  cookie未设置失效时间,浏览器没有删除cookie
  sessionStorage 在浏览器中打开新页面不会记录(sessionStorage),window.open 打开就会记录,为什么?



Cookie (HTTP Cookie)
  作用
    HTTP本身是无状态的,客户端通过Cookie来存储会话信息
  限制
    cookie在性质上是绑定在特定域名下的 
    意思是说当设定了一个cookie之后,再给创建这个cookie的域名发送请求的时候,都会包含这个cookie,这个限制确保了存储在cookie中的信息只能让批准的接受者访问,而无法被其他域访问
    每个域名的cookie总数有限制 (name=value&age=18) 两个
      IE7之后 最多50个
      Firefox 最多50个
      Opera 最多30个
      Safari和 chrome 对每个域名的cookie数量没有限制
    cookie的尺寸有限制 大约4096B(加减1)的长度限制 建议cookie的长度限制在4095B以内 尺寸限制影响到一个域下的所有cookie,而非每个cookie单独限制
  组成 
    名称
      一个唯一确定cookie的名称 不区分大小写 mycookie 和 myCookie是一个cookie 实践中最好区分大小写 名称要被URL编码
    值
      存储cookie的字符串值 要被URL编码
    域
      cookie对于哪个域名是有效的 所有向该域发送的请求中都会包含这个cookie的信息
    值
      可以包含子域(subdomain 如www.wrox.com)
      不包含子域 (如 .wrox.com 对于所有的子域都有限 可以做跨域信息存储)
      默认 来自设置cookie的那个域
    路径
      对于指定域中的路径应该向服务器发送cookie 例:可以指定cookie只可以从http://www.wrox.com/book/中访问,那么http://www.wrox.com的页面就不会发送cookie信息

      即便请求来自同一个域
    失效时间
      表示cookie何时应该被删除的时间戳(也就是何时应该停止向服务器发送这个cookie)
      默认情况下 浏览器会话结束时即将所有的cookie删除
      时间格式 GMT (toGMTString())
      如果设置的失效时间是当前时间以前 则cookie会被立刻删除
    安全标识
      在字符串中指定 secure 即可 
      指定后,只有使用SSL连接的时候才发送到服务器。例如cookie信息只能发送https://www.wrox.com 而 http://www.wrox.com的请求不能发送cookie
    注意:
      cookie的名称 和 值 要经过 URL编码
      域 路径 实效时间 secure标志都是服务器给浏览器的指示,以指定何时发送cookie 这些参数并不会发送到服务器的cookie信息的一部分,只有名值对才发送
    例子
      注:这里说的set-Cookie是客户端设置的内容
      set-Cookie: name=value;domain=.wrox.com; path=/; secure
      这里创建了一个对于所有的wrox.com的子域和域名下(由path参数指定的)所有页面都有效的cookie 因为创建了 secure标志 这个cookie只能通过SSL连接才能传输
  JS中的cookie
    document.cookie 
      返回当前页面可用的所有cookie(根据cookie的域 路径 失效时间 和安全设置)
      document.cookie = "key=value" 不会覆盖之前的cookie 而是添加到cookie的字符串中 如果key相同 则覆盖
      设置
        name=value; expires=expiration_time; path=domian_path; secure
        只有name和value是必要参数 其余为可选
      例子
        document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("value") +"; domain=".wrox.com; path=/; expires=" + new Date(); //new Date(0)设置为过期

IE 用户数据
   <div style="behavior:url(#default#userData)" id="dataStore"></div>
   var dataStore = document.getElementById("dataStore");
   dataStore.setAttribute("name", "lxk");
    dataStore.setAttribute("age", 22);
        dataStore.save("info")

  div元素上存了两部分信息 在setAttribute()存储之后 调用了save方法 指定了数据空间的名称为info 下一次页面载入的时候 使用load()方法指定同样的数据空间来获取数据 值不存在或者载入不存在的 返回为null
    dataStore.load("info");
    dataStore.getAttribute("name") --> lxk;
    dataStore.getAttribute("age") --> 22
  可以调用removeAttribute("name")来删除 之后再调用save()方法保存即可 
延伸:
  不同子域之间通信问题
  可以通过设置 domain为.wrox.com 来让所有的子域可以拿到这个cookie

  HTTP 是一个网络协议 专门用来传输WEB的内容的
  SSL
    Secure Sockets Layer 安全套接层 网景提出 
    为啥有SSL协议呢
    因为HTTP协议是明文的,存在很多缺点(传输内容会被窥探和修改)

  TLS 
    Transport Layer Security 传输层安全协议
    1999年,SSL 因为应用广泛,已经成为互联网上的事实标准。IETF 就在那年把 SSL 标准化 之后标准化的名字叫TLS 和SSL为同一个东西的不同阶段

  HTTPS
  HTTP + SSL/TLS

var CookieUtil = {
    /*
     *   思路 
     *      字符串的截取(开始位置, 结束位置)
     *      开始位置 indexOf() + name.length
     *      结束位置 indexOf(";", 开始位置) 如果= -1 结束位置等于字符串的长度;
    **/
    get: function(name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;

            if(cookieStart > -1){
                var cookieEnd = document.cookie.indexOf(";", cookieStart);
                if( cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))
            }
        return cookieValue;
    },
    set: function(name, value, expires, path, domain, secure){
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        
        if(expires instanceof Date){
            cookieText += "; expires=" + expires.toGMTString();
        }

        if(path){
            cookieText += "; path=" + path;
        }

        if(domain){
            cookieText += "; domain=" + domain;
        }

        if(secure){
            cookieText += "; secure";
        }

        document.cookie = cookieText;
    },
    unset: function(name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

/*
 *  解析 cookie格式(subCookie)为  name=name1=value1&name2=value2&name3=value
 *
 *
**/
var SubCookieUtil = {
    get: function(name, subName){
        var subCookie = this.getAll(name);
        if(subCookie){
            return subCookie[subName];
        }else{
            return null;
        }
    },
    getAll: function(name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};

        if(cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);

            if(cookieValue.length > 0){
                subCookies = cookieValue.split("&");

                for(i = 0, len = subCookies.length; i < len; i++){
                    parts = subCookies[i].split("=");
                    result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1])
                }
                return result;
            }
        }
        return null;
    },
    set: function(name, subName, value, expires, path, domain, secure){
        var subcookies = this.getAll(name) || {};
        subcookies[subName] = value;
        this.setAll(name, subcookies, expires, path, domain, secure)
    },
    /*
     *      setALl("data", {name:"Nicholas", age: 22}, new Date("January 2 2020"))
     *.
    **/
    setAll: function(name, subcookies, expires, path, domain, secure){
        var cookieText = encodeURIComponent(name) + "=",
            subCookieParts = new Array(),
            subName;

        for(subName in subcookies){
            if(subName.length > 0 && subcookies.hasOwnProperty(subName)){
                subCookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]))
            }
        }

        if(subCookieParts.length > 0){
            cookieText += subCookieParts.join("&");

            if(expires instanceof Date){
                cookieText += "; expires=" + expires.toGMTString();
            }

            if(path){
                cookieText += "; path=" + path;
            }

            if(domain){
                cookieText += "; domain=" + domain;
            }

            if(secure){
                cookieText += "; secure";
            }
        }else{
            cookieText += "; expires=" + (new Date(0)).toGMTString();
        }
        document.cookie = cookieText;
    },
    unset: function(name, subName, path, domain, secure){
        var subcookies = this.getAll(name);
        if(subcookies){
            delete subcookies[subName];
            this.setAll(name, subcookies, null, path, domain, secure)
        }
    },
    unsetAll: function(name, path, domain, secure){
        this.setAll(name, null, new Date(0), path, domain, secure)
    } 
}

原文地址:https://www.cnblogs.com/liuxiankun/p/8397592.html