js-超实用的源生cookie方法，支持批量删除所有cookie

2016/12/20

有人会说用 $.cookie，但 $.cookie 只能按天计算过期时间，还需要调用 jQuery。

干脆还是自己写一个，反正又不难。
先看效果

常用的属性有 expires max-age domain path (expires 可以替换成 max-age) expires 不再介绍

max-age

用秒来设置 cookie 的生存期。
如果 max-age 属性为正数，则表示该 cookie 会在 max-age 秒之后自动失效。
浏览器会将 max-age 为正数的 cookie 持久化，即写到对应的 cookie 文件中。
无论客户关闭了浏览器还是电脑，只要还在 max-age 秒之前，登录网站时该 cookie 仍然有效。
如果 max-age 为负数，则表示该 cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该 cookie 即失效。
max-age 为负数的 Cookie，为临时性 cookie，不会被持久化，不会被写到 cookie 文件中。
cookie 信息保存在浏览器内存中，因此关闭浏览器该 cookie 就消失了。
cookie 默认的 max-age 值为 -1。
如果 max-age 为 0，则表示删除该 cookie。cookie机制没有提供删除 cookie 的方法，因此通过设置该 cookie 即时失效实现删除 cookie 的效果。
失效的 Cookie 会被浏览器从 cookie 文件或者内存中删除。
如果不设置 expires 或者 max-age 这个 cookie 默认是 Session 的，也就是关闭浏览器该 cookie 就消失了。

domain

表示的是 cookie 所在的域，默认为请求的地址，如网址为 www.test.com/test/test.aspx，那么 domain 默认为 www.test.com。
而跨域访问，如域 A 为 t1.test.com，域 B 为 t2.test.com，那么在域 A 生产一个令域 A 和域 B 都能访问的 cookie 就要将该 cookie 的 domain 设置为 .test.com；
如果要在域 A 生产一个令域 A 不能访问而域 B 能访问的 cookie 就要将该 cookie 的 domain 设置为 t2.test.com。

path

表示 cookie 所在的目录，asp.net 默认为 /，就是根目录。
在同一个服务器上有目录如下：/test/,/test/cd/,/test/dd/，现设一个 cookie1 的 path 为 /test/，cookie2 的 path 为 /test/cd/，那么 test 下的所有页面都可以访问到 cookie1，而 /test/ 和 /test/dd/ 的子页面不能访问 cookie2。
这是因为 cookie 能让其 path 路径下的页面访问。
浏览器会将 domain 和 path 都相同的 cookie 保存在一个文件里，cookie 间用 * 隔开。
含值键值对的 cookie：含多个子键值对的 cookie 格式是 name=key1=value1&key2=value2。
可以理解为单键值对的值保存一个自定义的多键值字符串，其中的键值对分割符为 &，当然可以自定义一个分隔符，但用 asp.net 获取时是以 & 为分割符。

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="http://orzcss.com/">
  <title>封装删除cookie方法</title>
</head>

<body>
  <script type="text/javascript">
    // author: http://orzcss.com/
    (function (window) {
      function cookie() {}
      cookie.prototype.add = add;
      cookie.prototype.get = function (name) {
        var nameEQ = name + "=";
        var arr = document.cookie.split(";");
        for (var i = 0; i < arr.length; i++) {
          var str = arr[i];
          while (str.charAt(0) == " ") {
            str = str.substring(1, str.length);
          }
          if (str.indexOf(nameEQ) == 0)
            return decodeURIComponent(str.substring(nameEQ.length, str.length));
        }
        return null;
      }
      cookie.prototype.del = del;
      cookie.prototype.delAll = function (url) {
        var strCookie = document.cookie;
        // 将多cookie切割为多个名/值对  
        var arrCookie = strCookie.split("; ");
        // 遍历cookie数组，处理每个cookie对    
        for (var i = 0; i < arrCookie.length; i++) {
          var arr = arrCookie[i].split("=");
          if (arr.length > 0)
            del(arr[0], (url || location.hostname));
        }
      }

      function add(name, value, time, domain, path) {
        var maxAgeStr = "; max-age=" + time;
        var domainStr = "; domain=" + (domain || location.hostname);
        var pathStr = "; path=" + (path || '/');
        var str = name + "=" + encodeURIComponent(value) + maxAgeStr + domainStr + pathStr;
        document.cookie = str;
      }

      function del(name, url) {
        add(name, "", 0, url);
      }
      window.cookie = new cookie();
    })(window);

    // 使用方法
    cookie.add('name', 'Alice', 800);
    cookie.add('weight', '45kg', '');
    cookie.add('weight2', '50kg', '');
    cookie.add('age', 20, 800, '127.0.0.1');
    cookie.add('sex', '女', 800);
    cookie.add('height', '180cm', 800, '127.0.0.1');
    console.log(cookie.get('name'));
    console.log(cookie.get('sex'));
    cookie.del('weight2', "127.0.0.1");
    //cookie.delAll("127.0.0.1"); // 删除指定域下的 cookie
    //cookie.delAll(); // 删除当前域下的所有cookie
    cookie.delAll("baidu.com");
    cookie.delAll("www.baidu.com");
  </script>
</body>
</html>

有人又要说不要造轮子了，我在这想说，已经有了一家做手机的公司，为什么还有更多人开公司在做手机？
你不造轮子，你怎么知道原理，你怎么提高技术，否则光会用别人写的东西，你只能是会 copy，不是一个合格的程序员。

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。

cookie 的一些属性

max-age

domain

path

完整代码