cookie

188 阅读2分钟

cookie

用于在客户端存储会话信息。

构成

  • 名称:唯一标识 cookie 的名称。cookie名不区分大小写, 但是一些服务器软件会区分,为了避免出错,建议区分使用。
  • 值:存储在cookie里的字符串值。
  • 域:cookie有效的域。发送到这个域的所有请求都会包含对应的cookie。
  • 路径:请求URL中包含这个路径才会把cookie发送到服务器。默认情况下,cookie 属于当前页面。
  • 过期时间::表示何时删除cookie的时间戳(即什么时间之后就不发送到服务器了)。默认情况下,浏览器会话结束后会删除所有cookie。
  • 安全标志:设置之后,只在使用SSL安全连接的情况下才会把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存一些短的字段,相对长一些的建议存Storage。

创建cookie

document.cookie="username=123";

cookie设置过期时间(以 UTC 或 GMT 时间)

document.cookie="username=123; expires=Thu, 18 Dec 2023 12:00:00 GMT";

永久 cookie 可以用Fri, 31 Dec 9999 23:59:59 GMT作为过期日或者世界末日 Tue, 19 Jan 2038 03:14:07 GMT

使用 path 参数告诉浏览器 cookie 的路径

document.cookie="username=123; expires=Thu, 18 Dec 2023 12:00:00 GMT; path=/";

获取全部cookie

var x = document.cookie;

修改cookie

document.cookie="username=456; expires=Thu, 18 Dec 2023 12:00:00 GMT; path=/";

删除(设置 expires 参数为以前的时间即可)

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

如果您需要查找一个指定 cookie 值,您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

大佬们可以尝试组件封装一个操作方便的辅助方法

下面推荐开源库--js-cookie工具库

Cookies.set('name', 'value', { expires: 7, path: '' })
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Cookies.remove('name')
...