阿荡的个人网站

Appearance

梳理cookie知识点

概述 ​

cookie 是 JavaScript 提供的一种本地存储机制，是存于硬盘某一位置的文本文件。以 win7 Chrome 为例，其 cookie 的存储位置为C:\Users\yourUserName\AppData\Local\Google\Chrome\UserData\Default\Cookies 打开开发者工具，在 Application->Storage->Cookies 标签下，可以查看与网站相关的 cookie。 当 cookie 读/写时，会被对应地解码/编码。

属性 ​

  • 名称 ：cookie 的唯一标识符，不区分大小写（例如 demo 与 Demo 指向相同的 cookie）。
  • 值：储存在 cookie 中的字符串值。
  • 域：是指 cookie 对于哪个域是有效的，默认为设置 cookie 的那个网站的域。比如将某一 cookie 的域设置为.demo.com，那么，对所有该域（例如域名为api.demo.com的后端接口）发送的请求，都会携带这个 cookie 信息。
  • 路径：对于指定域中的路径发送 cookie 信息，例如，指定路径为 http://www.demo.com/login，那么请求 http://www.demo.com/ 的页面就不会发送 cookie 信息，即使请求都是来自同一个域的。
  • 失效时间：表示 cookie 何时被删除的时间戳，默认浏览器会话结束时即将所有 cookie 删除。可以自己设置删除时间。这个值是个 GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定应该删除 cookie 的准确时间。如果设置的失效日期是个以前的时间，则 cookie 会被立刻删除。
  • 安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。例如，cookie 信息只能发送给 https://www.demo.com，而 http://www.demo.com 的请求则不能发送 cookie。

优点 ​

  • 数据持久：刷新页面，仍然存在有效的 cookie。
  • 多页面共享数据：将不同页面需要共享的数据写入 cookie，是种不错的选择。
  • 信息验证：请求服务端会携带对应的有效 cookie，可核查信息。
  • 保持登陆状态：像论坛这类具有登陆功能的网站，会在用户登陆成功后写入相关 cookie 以维持用户的登陆状态，直到 cookie 被销毁。

限制 ​

  • 禁用 cookie：将浏览器设置为禁用 cookie 会禁止 cookie 相关操作。
  • 数量限制：每个域的 cookie 总量是有限的，cookie 超出限制会导致浏览器删除陈旧的 cookie，腾出空间给新设置的 cookie。
  • cookie 可被篡改：cookie 可以被脚本修改，这就需要某些加密手段对 cookie 进行加密处理。

操作 ​

原生 js 实现 ​

创建 cookie

javascript
function setCookie(name, value, expiredate, domain, path, secure) {
  var cookieText = escape(name) + "=" + escape(value);
  if (expiredate) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredate);
    cookieText += ";expires=" + exdate.toGMTString();
  }
  if (domain) {
    cookieText += ";domain=" + domain;
  }
  if (path) {
    cookieText += ";path=" + path;
  }
  if (secure) {
    cookieText += ";secure";
  }
  document.cookie = cookieText;
}

TIP

必须传入参数 name 和 value

根据 name 获取对应 cookie

javascript
function getCookie(c_name) {
  if (document.cookie.length > 0) {
    var c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      var c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) c_end = document.cookie.length;
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}

删除 cookie

javascript
function deCookie(name, value, expiredate, domain, path, secure) {
  this.setCookie(name, "", new Date(0), domain, path, secure);
}
javascript
//创建名为name值为value，有效期为7天，路径为`/`的cookie
$.cookie("name", "value", { expires: 7, path: "/" });
//获取指定name的cookie，若找不到，返回 undefined
$.cookie("name"); // => "value"
$.cookie("nothing"); // => undefined
//获取所有有效cookie
$.cookie();
//删除指定cookie，删除失败返回false
$.removeCookie("name"); // => true
$.removeCookie("nothing"); // => false
//若创建某一cookie时设置了额外信息，删除时需要传入对应的额外参数
$.cookie("name", "value", { path: "/" });
// 删除失败
$.removeCookie("name"); // => false
// 删除成功
$.removeCookie("name", { path: "/" }); // => true

如何读写 json 数据 ​

写入 json 数据：调用JSON.stringify()方法，将 json 数据转换为字符串，利用上面的 cookie 操作创建 cookie。

读取 json 数据：读取该 cookie 时，返回 json 字符串，调用JSON.parse()方法，解析为原 json 数据。

更新时间: