前端 js 操作 Cookie 详细介绍与案例

1 前言

1.1 详细介绍

1. 名称和值：Cookie由一个名称和对应的值组成。名称是一个字符串，用于标识Cookie，而值则是与名称相关联的数据。
2. 域名：每个Cookie都与特定的域名相关联。Cookie只会被发送到与其关联的域名下的请求中。
3. 路径：Cookie可以与特定的路径相关联。当浏览器向指定路径下的服务器发送请求时，与该路径相关联的Cookie将被附加到请求中。
4. 过期时间：Cookie可以设置一个过期时间，以指定Cookie的有效期限。一旦超过该时间，浏览器将不再发送该Cookie。
5. 安全标志：通过设置安全标志，可以将Cookie限制为仅在通过HTTPS（安全的加密协议）进行通信时发送。
6. HTTP Only标志：设置HTTP Only标志后，Cookie将无法通过客户端的脚本访问，这有助于防止跨站点脚本攻击（XSS）。

1.2 Cookie的工作流程

1. 服务器发送一个包含Cookie的HTTP响应头给浏览器，响应头中包含了名称、值和其他相关信息。
2. 浏览器接收到响应后，会将Cookie存储在本地的Cookie存储中。
3. 当浏览器向同一域名下的服务器发送后续请求时，会自动附加存储在本地的Cookie信息到请求的HTTP头中。
4. 服务器接收到请求后，可以读取Cookie中的值并根据需要做出相应的处理。

通过使用Cookie，服务器可以在不同的HTTP请求之间保持会话状态、记录用户首选项、实现购物车功能、进行用户跟踪等。然而，Cookie也有一些限制，包括存储容量的限制、跨域访问的限制以及安全性方面的考虑。

值得注意的是，由于隐私和安全的考虑，最近几年来，浏览器对Cookie的限制和隐私保护机制也有所增加，例如同源策略、Cookie的SameSite属性和用户对Cookie的控制选项等

哈喽，大家好，我是[有勇气的牛排]（全网同名）🐮🐮🐮

https://www.couragesteak.com/article/439

有问题的小伙伴欢迎在文末[评论，点赞、收藏]是对我最大的支持！！！。

2 如何减小Cookie使用风险

在开发中，减少Cookie的风险是确保用户隐私和提高安全性的重要方面。以下是一些减少Cookie风险的最佳实践：

1. 最小化Cookie的数据量：只存储必要的信息在Cookie中，避免存储敏感或不必要的数据。仅将标识用户会话或授权令牌等必要的信息存储在Cookie中。
2. 使用安全标志：对于需要在安全通信（通过HTTPS）中传输的Cookie，设置"Secure"标志，这样可以确保Cookie只在加密的连接中传输。这有助于防止通过网络拦截或窃听攻击获取Cookie的值。
3. 设置HttpOnly标志：对于存储敏感信息的Cookie，设置"HttpOnly"标志，防止客户端脚本访问Cookie。这可以减少跨站点脚本攻击（XSS）的风险，因为攻击者无法通过脚本访问或窃取Cookie的值。
4. 使用适当的过期时间：设置适当的过期时间来限制Cookie的有效期。确保Cookie的生命周期仅限于需要的时间范围，避免过长时间的持久性Cookie，以减少风险。
5. 采用同源策略：浏览器遵循同源策略，限制Cookie只在与其关联的域名下发送。这可以防止恶意网站访问其他域名下的Cookie信息。
6. 使用SameSite属性：通过将Cookie的SameSite属性设置为Strict或Lax，可以限制Cookie只在同一站点发起的请求中发送，从而减少跨站点请求伪造（CSRF）攻击的风险。
7. 适当处理敏感信息：对于包含敏感信息的Cookie，需要采取额外的保护措施，例如加密或哈希处理敏感数据，以及在存储和传输过程中使用适当的加密措施。
8. 定期审查和清理Cookie：定期审查应用程序中使用的Cookie，确保不再需要的Cookie及时删除。及时清理无效或过期的Cookie，减少不必要的风险。

除了上述最佳实践，密切关注最新的Web安全标准和更新，并遵循相关的安全建议和建议也是非常重要的。同时，定期进行安全性评估和漏洞扫描，以确保系统和Cookie的安全性。

3 实战操作

3.1 设置 Cookie

functionsetCookie(name, value, expires, path, domain, secure){let cookieString = name +"="+encodeURIComponent(value);if(expires){let expirationDate =newDate();
        expirationDate.setTime(expirationDate.getTime()+ expires *24*60*60*1000);
        cookieString +="; expires="+ expirationDate.toUTCString();}if(path){
        cookieString +="; path="+ path;}if(domain){
        cookieString +="; domain="+ domain;}if(secure){
        cookieString +="; secure";}

    document.cookie = cookieString;}

3.2 获取 Cookie

functiongetCookie(name){let cookieName = name +"=";let cookies = document.cookie.split(';');for(let i =0; i < cookies.length; i++){let cookie = cookies[i].trim();if(cookie.indexOf(cookieName)===0){returndecodeURIComponent(cookie.substring(cookieName.length));}}returnnull;}

3.3 删除 Cookie

functiondeleteCookie(name, path, domain){if(getCookie(name)){
        document.cookie = name +"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";}if(path){
        document.cookie = name +"=; path="+ path;}if(domain){
        document.cookie = name +"=; domain="+ domain;}}

3.4 测试

// 设置名为"username"的Cookie，有效期为7天，路径为根路径setCookie("username","有勇气的牛排",7,"/");// 获取名为"username"的Cookie的值let username =getCookie("username");
console.log(username);// 输出: "JohnDoe"// 删除名为"username"的CookiedeleteCookie("username");