客户端存储技术之Cookie

最新推荐文章于 2023-02-01 16:35:00 发布

啊哟瑞迪，狗！

最新推荐文章于 2023-02-01 16:35:00 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：客户端存储技术前端 cookie 浏览器 http

本文链接：https://blog.youkuaiyun.com/qq_29181145/article/details/94009656

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Cookie的基本概念，详细讲解了如何创建、读取和删除Cookie，以及利用Cookie.js库进行操作。Cookie最初在1994年的Netscape浏览器中引入，虽然有存储限制和网络传输的缺点，但它仍然被广泛用于存储用户登录信息、访问令牌等。文中还提到了Cookie在用户体验优化中的应用场景，如识别新用户、显示新功能介绍和欢迎回访用户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Cookie简介

Cookie第一次出现是在1994年Netscape浏览器中，到现在已经是最古老、最稳定的客户端存储技术。Cookie使用HTTP header发送，大家都知道，每当浏览器请求一次资源，就会有一组header随请求一起发送，header中包含有关浏览器的信息和数据形式。服务端响应后，又会将header发送回来。由浏览器发送到服务器，又从服务器发送到浏览器。那么你会发现，如果客户端存储的一个优点是不通过网络传送数据，那么来回传送Cookie不是背道而驰吗？是的，这就是不建议完全使用Cookie的原因之一。如今浏览器已不再限制Cookie的数量，但是Web服务器会限制，当Cookie超出限制时，web服务器会抛出异常。通常，每个域名50个、大小总计4KB的Cookie 是安全的，不过这存储不了太多Cookie 值，会影响它们的实际应用。

Cookie对应唯一的域名，也可以对应唯一的子域名，也可以创建对特定路径有效的Cookie，这种设置Cookie位置的方案取决于你的应用用途。此外可以设置Cookie的有效时间：

永远存在的Cookie
存在特定时长的Cookie
特定时间点之后失效的Cookie
只在当前会话期间存在的Cookie

二、Cookie的使用

因为Cookie没有API可以调用，使用Cookie，只需直接访问document.cookie对象即可。

1. 创建Cookie

document.cookie = "name = Alice";

创建了一个name为Alice的Cookie。

let name = "Alice";
document.cookie = "name = " + encodeURIComponent(name)；

动态定义Cookie，那么就需要使用类似encodeURIComponent的辅助函数。

document.cookie = "name = Alice; expires = Sat Jun 1 2019 20:38:03 GMT+0800";

在Cookie 值后面使用一个分号可以追加元数据，上个例子设置了Cookie 何时过期。

document.cookie = "name = Alice; expires = Sat Jun 1 2019 20:38:03 GMT+0800;domain=mp.youkuaiyun.com";

再追加元数据domain，设置此Cookie只对mp.youkuaiyun.com的域名有效。

当你不这样指定元数据时，Cookie 默认只对当前域名的当前路径有效，有效期是当前会话，直到浏览器关闭时，结束当前会话。

2. 读取Cookie

document.cookie读取Cookie信息，但是无法获取元数据，而是一堆字符串，这显然不是我们期望的，后面会介绍一个小巧方便的cookie.js的库，通过cookie.js可以轻松的读取。

3. 删除Cookie

要删除Cookie，只需要将其过期时间expires设置成过去的时间。

document.cookie = "name = Alice; expires = Sat Jun 1 2018 20:38:03 GMT+0800";

从技术上讲，这个时间值无关紧要，但名称必须与你想要删除的Cookie 名称一致。

4. 利用Cookie.js库

利用一些cookie.js这样的库(例如Vue中可以使用js-cookie的插件)，通过这种js库可以非常轻松的操作cookie。

getItem：获取Cookie
setItem：设置Cookie（包括有效期、路径、域名等）
removeItem：删除Cookie
hasItem：检查Cookie 是否存在
keys：返回所有Cookie 的名称

// 获取lastVisit的cookie的值
var lastVisit = docCookies.getItem("lastVisit");

// 检查名为lastVisit的cookie是否存在
docCookies.hasItem("lastVisit");

//将lastVisit设为当前时间
docCookies.setItem("lastVisit", new Date(), Infinity);

// 删除cookie
docCookies.removeItem("lastVisit");