cookie，localstorage，sessionStorage的讲解，主要讲cookie

前段时间在cookie里有个小问题，然后引发了一场思考和追源。下面是我思考和追源的过程


1、chrome不支持本地静态js的cookie（参考来源：https://blog.csdn.net/nzyalj/article/details/53419745）

2、cookie存值，若过期时间设置为当前时间，这就是sessionCookie，也就是会话cookie，关闭了浏览器后，这个cookie就没了。
在chrome浏览器里，像下面这种的，当失效时间是1969-12-31T23:59:59.000Z时，就是sessionCookie，关闭了整个浏览器后就没有这个cookie了（不是单个页面）。
在无痕浏览下，可以用sessionCookie替代session。

  3、cookie里 expires和max-age的区别  一个相对，一个绝对。  (参考来源：参考1   参考2)

　　max-age是HTTP/1.1出来的。max-age相对对的是文档的请求时间(Atime)

　　Expires是HTTP/1.0中的，设置expires的时候，要考虑服务器的相对文件的最后访问时间(Atime)或者修改时间(MTime)

　　直接通俗简单粗暴点：

　　　　max-age是多少秒后失效，而，expires是设置时间过期，看下面截图例子更为简单明了

　　　　（不考虑服务器的什么Atime和Mtime了，硬要考虑的话，记住下面几句比较）。

　　　　1、max-age是高版本的，现在普遍都支持了。   expires是低版本的兼容，很多老项目都是expires。

　　　　2、expires有个致命的缺陷就是，要服务器和客户端的时间一致，不然会有不可控性的问题存在。

 

  4、在比较expires和max-age区别的时候，发现Atime和Mtime这个专业术词不懂，然后又去问了前辈，然后又知道了协商缓存和强缓存。（参考来源：https://www.cnblogs.com/wonyun/p/5524617.html，我也不知道对理解cookie有没有用，讲的是http缓存的问题）

  5、cookie和sessionStorage的机制   http://www.cnblogs.com/andy-zhou/p/5360107.html

  6、因为浏览器的无痕浏览模式，会导致localStorage和sessionStorage的失效，所以，我一般不用这两个，以后也会很少用这两个。

  7、万金油cookie代码（建议使用3，毕竟jQuery出品。）

7.1 max-age形式的封装

    function getCookie(){
        var cookie = {};
        var all = document.cookie;
        if( all == "" ){
            return null;
        }
        var list = all.split(";");
        for( var i = 0; i < list.length; i++ ){
            var cok = list[i];
            var p = cok.indexOf("=");
            var name = cok.substring( 0,p ).trim();
            var value = cok.substring(p+1);
            value = decodeURIComponent( value );
            cookie[ name ] = value;
        }
        return cookie;
    }
    function setCookie(name,value,dayToLive){
        var cookie = name + "=" + encodeURIComponent( value );
        if( typeof dayToLive === "number"){
            cookie += "; max-age=" + ( dayToLive * 60 * 60 * 24 );
        }
        cookie += ";path=/";
        document.cookie = cookie;
    }
    function deleteCookie( name ){
        var domain = location.host;
        var cookie = name + "=" + ";max-age=0;path=/";
        document.cookie = cookie;
        var cookie = name + "=" + ";max-age=0;path=/;domain=."+domain;  //去除qq登录后，token里的domain前的地址有一个点
        document.cookie = cookie;
    }

7.2 expire形式的封装

function setCookie(c_name, value, expiredays) {
        expiredays = expiredays ? expiredays : 30;
        var exdate = new Date()
        exdate.setDate(exdate.getDate() + expiredays)
        document.cookie = c_name + "=" + escape(value) +
            ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }

    function getCookie(name2) {
        var cookie = {};
        var all = document.cookie;
        if (all == "") {
            return {};
        }
        var list = all.split(";");
        for (var i = 0; i < list.length; i++) {
            var cok = list[i];
            var p = cok.indexOf("=");
            var name = cok.substring(0, p).trim();
            var value = cok.substring(p + 1);
            value = decodeURIComponent(value);
            cookie[name] = value;
        }
        return cookie[name2];
    }

7.3 expire形式的jq封装的cookie插件(从jq.cookie里扒的)

function cookIe(name, value, options){
       if (typeof value != 'undefined') { // name and value given, set cookie
           options = options || {};
           if (value === null) {
               value = '';
               options.expires = -1;
           }
           var expires = '';
           if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
               var date;
               if (typeof options.expires == 'number') {
                   date = new Date();
                   date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
               } else {
                   date = options.expires;
               }
               expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
           }
           var path = options.path ? '; path=' + options.path : '';
           var domain = options.domain ? '; domain=' + options.domain : '';
           var secure = options.secure ? '; secure' : '';
           document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
       } else { // only name given, get cookie
           var cookieValue = null;
           if (document.cookie && document.cookie != '') {
               var cookies = document.cookie.split(';');
               for (var i = 0; i < cookies.length; i++) {
                   var cookie = cookies[i]?cookies[i].trim():cookies[i];
                   // Does this cookie string begin with the name we want?
                   if (cookie.substring(0, name.length + 1) == (name + '=')) {
                       cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                       break;
                   }
               }
           }
           return cookieValue;
       }
   }




   //使用方式
   cookIe("name","like",{expires:1});   // 缓存一天
   cookIe("name","like",{expires:0});   //sessionCookie