客户端存储-cookie

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

什么是 Cookie简介

随着 Web 应用程序的出现，直接在客户端存储用户信息的需求也随之出现。这背后的想法是合理 的：与特定用户相关的信息应该保存在用户的机器上。不管是登陆信息、我的偏好，仍是其余数据， Web 应用程序提供者都须要有办法把它们保存在客户端，对该问题的第一个解决方案就是 cookie，cookie 由古老的网景公司发明，由一份名为 Persistent Client State: HTTP Cookies 的规范定义。今天，cookie 只 是在客户端存储数据的一个选项

cookie 是存储于访问者的计算机中的变量。每当同一台计算机经过浏览器请求某个页面时，就会发送这个 cookie。你可使用 JavaScript 来建立和取回 cookie 的值。” - w3school

cookie 是访问过的网站建立的文件，用于存储浏览信息，例如我的资料信息。

cookie

HTTP cookie 一般也叫做 cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应 HTTP 请求时，经过发送 Set-Cookie HTTP 头部包含会话信息

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value 
Other-header: other-header-value
复制代码

限制

由于 cookie 存储在客户端机器上，因此为保证它不会被恶意利用，浏览器会施加限制。同时，cookie 也不会占用太多磁盘空间。

• 不超过 300 个 cookie
• 每一个 cookie 不超过 4096 字节
• 每一个域不超过 20 个 cookie
• 每一个域不超过 81 920 字节
• 最新版 IE 和 Edge 限制每一个域不超过 50 个 cookie
• 最新版 Firefox 限制每一个域不超过 150 个 cookie
• 最新版 Opera 限制每一个域不超过 180 个 cookie
• Safari 和 Chrome 对每一个域的 cookie 数没有硬性限制。

cookie 的构成

• 名称：惟一标识 cookie 的名称。cookie 名不区分大小写，所以 myCookie 和 MyCookie 是同一 个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，由于一些服务器软件可能这样 对待它们。cookie 名必须通过 URL 编码。
• 值：存储在 cookie 里的字符串值。这个值必须通过 URL 编码。
• 域：cookie 有效的域。发送到这个域的全部请求都会包含对应的 cookie。这个值可能包含子域（如 www.iwhao.top） ，也能够不包含（如.iwhao.top 表示对 iwhao.top 的全部子域都有效）。若是不明 确设置，则默认为设置 cookie 的域。
• 路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，能够指定 cookie 只能由 www.iwhao.top/books/ 访问，所以访问 http:/www.iwhao.top/ 下的页面就不会发送 cookie，即 使请求的是同一个域。
• 过时时间：表示什么时候删除 cookie 的时间戳（即什么时间以后就不发送到服务器了）。默认状况下， 浏览器会话结束后会删除全部 cookie。不过，也能够设置删除 cookie 的时间。这个值是 GMT 格 式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。这样即便关闭 浏览器 cookie 也会保留在用户机器上。把过时时间设置为过去的时间会当即删除 cookie。
• 安全标志：设置以后，只在使用 SSL 安全链接的状况下才会把 cookie 发送到服务器。例如，请 求 www.iwhao.top 会发送 cookie，而请求 www.iwhao.top 则不会。

js 中的cookie

从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。

在JavaScript中能够经过 document.cookie 来读取或设置这些信息。但由于接口过于简单，只有 BOM 的 document.cookie 属性。 根据用法不一样，该属性的表现迥异。要使用该属性获取值时就须要单独处理下了，能够经过辅助函数来简化相应的操做

class CookieUtil {
  static get (name) {
    let cookieName = `${encodeURIComponent (name)}=`,
      cookieStart = document.cookie.indexOf (cookieName),
      cookieValue = null;
    if (cookieStart > -1) {
      let cookieEnd = document.cookie.indexOf (';', cookieStart);
      if (cookieEnd == -1) {
        cookieEnd = document.cookie.length;
      }
      cookieValue = decodeURIComponent (
        document.cookie.substring (cookieStart + cookieName.length, cookieEnd)
      );
    }
    return cookieValue;
  }
  static set (name, value, expires, path, domain, secure) {
    let 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;
  }
  static unset (name, path, domain, secure) {
    CookieUtil.set (name, '', new Date (0), path, domain, secure);
  }
}

复制代码

CookieUtil.get()获取指定名称的cookie值

CookieUtil.set()方法用于设置页面上的 cookie 接收多个参数：cookie 名称、cookie 值、可 选的 Date 对象（表示什么时候删除 cookie）、可选的 URL 路径、可选的域以及可选的布尔值（表示是否添 加 secure 标志）。

CookieUtil.unset()方法实现了这些处理。这个方法接收 4 个参数：要删除 cookie 的名称、可选的路径、可选的域和可选的安全标志。

HTTP-only

还有一种叫做 HTTP-only 的 cookie。HTTP-only 能够在浏览器设置，也能够在服务器设置，但只能 在服务器上读取，这是由于 JavaScript 没法取得这种 cookie 的值。 由于全部 cookie 都会做为请求头部由浏览器发送给服务器，因此在 cookie 中保存大量信息可能会影 响特定域浏览器请求的性能。保存的 cookie 越大，请求完成的时间就越长。即便浏览器对 cookie 大小有 限制，最好仍是尽量只经过 cookie 保存必要信息，以免性能问题。 对 cookie 的限制及其特性决定了 cookie 并非存储大量数据的理想方式。所以，其余客户端存储技 术出现了。

注意 不要在 cookie 中存储重要或敏感的信息。cookie 数据不是保存在安全的环境中，因 此任何人均可能得到。应该避免把信用卡号或我的地址等信息保存在 cookie 中。

---

以上就是本篇的所有内容了，很是感谢帅哥美女们能看到这里，若是这个文章写得还不错或者对你有一点点帮助，求点赞，求关注，求分享，固然有任何问题能够在评论讨论，我都会积极回答的，再次感谢😁