js-超实用的源生封装cookie方法加批量删除cookie

web翎云阁 2016-12-20 13:31

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

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

先看效果

先介绍下 cookie 的一些属性

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 获取时是以 & 为分割符。

完整代码截图：

// 使用方法

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");

有人又要说不要造轮子了，我在这想说，已经有了一家做手机的公司，为什么还有更多人开公司在做手机？

你不造轮子，你怎么知道原理，你怎么提高技术，否则光会用别人写的东西，你只能是会 copy，不是一个合格的程序员。

---

源码链接地址：

http://orzcss.com/posts/413f935b/#完整代码

---

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

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

本文为头条号作者发布，不代表今日头条立场。