likes
comments
collection
share

尝尝这块”曲奇“[cookie]昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更

作者站长头像
站长
· 阅读数 42

一、前言

昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更早的浏览器存储——cookie。分析它与前端存储其他技术如localStorage的区别，帮助你更好地利用这一技术提升用户体验。

尝尝这块”曲奇“[cookie]昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更

二、cookie

1、应用场景

  • 维护用户的登录状态是最常见的用途之一。Cookie 可以存储一个唯一标识符，用来确认用户已登录，这样用户在浏览不同页面时就不必反复登录。
  • 网站可以使用 Cookie 存储用户的偏好设置，如界面语言、主题选择、字体大小等，以便用户下次访问时自动应用这些设置。
  • 尽管更现代的Web应用可能使用如localStorage这样的技术，但Cookie过去常被用来保存购物车中的商品信息，确保用户在不同页面间切换时购物车内容得以保留。

也就是说Cookie是为了存储一些用户相关的内容，注重于维持用户状态、实现个性化体验方面。

2、存储特点

尝尝这块”曲奇“[cookie]昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更

尝尝这块”曲奇“[cookie]昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更

观察得到，cookie是以简单的键值对存储，且值全都是字符串形式，而localStorage可以存储JSON对象。

<script>
    // 小饼干
    document.cookie = "uid=1361622904613146"
</script>

建一个html，手动的添加自己的cookie，来看看可不可行。

尝尝这块”曲奇“[cookie]昨天分享了随着html5标准被引入和普及的localStorage，今天接着介绍另一种更

这样来看是可行的，那么仔细观察这一行属性除了我们给出的键值还有些什么呢？ 一起来看看cookie的属性及其含义吧。

  • 名称（Name） : 每个Cookie都有一个唯一名称，用于标识存储在浏览器上的具体数据项。

  • 值（Value） : 这是与Cookie名称配对的数据值，可以是任何字符串。

  • 域（Domain） : 指定哪些域名可以访问该Cookie。默认情况下，Cookie仅对设置它的同一域名有效。但是，如果设置了Domain属性，那么指定的域名及其子域名都可以访问此Cookie。

  • 路径（Path） : 定义了Cookie在哪些路径下是有效的。默认情况下，Cookie只对设置它的页面所在路径有效，但可以通过设置Path属性使其对整个网站或特定路径下的页面有效。例如，设置为/意味着网站的所有路径都可以访问该Cookie。

  • 过期时间（Expires/Max-Age） :

  • Expires: 指定Cookie何时应该被浏览器删除。值是一个UTC日期时间字符串，指示Cookie的有效结束时间。一旦到达这个时间点，Cookie就会被浏览器自动删除。

  • Max-Age: 与Expires相似，但以秒为单位指定Cookie的有效期。如果未设置或设为0，则表示Cookie会在浏览器会话结束后被删除。

后面的一些属性暂时不在这里逐个介绍，今天先看看前面的几种。

三、Cookie的操作与管理

在实际开发中，直接操作document.cookie字符串来进行Cookie的读取、设置和删除虽可行，但过程繁琐且容易出错。因此，我们选择封装Cookie操作的函数，方便打理cookie。

class CookieManager {
    getCookie(name) {
        const cookies = document.cookie.split('; ');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].split('=');
            if (cookie[0] === name) 
            return decodeURIComponent(cookie[1]);
        }
        return null;
    }

    setCookie(name, value, days = 7) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + encodeURIComponent(value)
        + expires + "; path=/"

    }

    removeCookie(name) {
        this.setCookie(name, "", -1);
    }
}

1、getCookie(name)

从浏览器中检索指定名称的Cookie值。

  • 使用document.cookie获取所有当前页面的Cookie，这些Cookie是以分号和空格分隔的字符串形式存储的。
  • 通过字符串的split('; ')方法将其分割成数组，这样每个元素就是一个单独的Cookie字符串。
  • 遍历这个数组，对每个Cookie字符串进一步使用split('=')分割，得到键名和键值。
  • 判断键名是否等于我们要查找的name，如果是，则使用decodeURIComponent解码键值（因为Cookie值可能包含特殊字符，通过URL编码保证安全存储）并返回。
  • 如果遍历完所有Cookie都没有找到匹配的键名，则返回null，表示该Cookie不存在。

2、setCookie(name, value, days = 7)

设置一个新的Cookie或者更新已有Cookie的值，并默认设置有效期和根路径。

  • 接收Cookie的名称、值和可选的有效天数作为参数，有效天数默认为7天。
  • 判断是否设置了有效天数，如果设置了，则计算过期时间。通过获取当前时间并加上指定天数的毫秒数，然后转换为UTC字符串格式，用于Cookie的过期时间设置。
  • 使用encodeURIComponent对Cookie的名称和值进行编码，以确保它们能够安全地作为Cookie内容存储。
  • 构建Cookie字符串，包括名称、值、过期时间（如果有的话），并固定设置路径为'/'，这意味着这个Cookie将在整个网站范围内有效。
  • 直接将构造好的Cookie字符串赋值给document.cookie，实现Cookie的设置或更新。

3、removeCookie(name)

删除指定名称的Cookie。

  • 调用setCookie方法，但将Cookie的值设为空字符串，并将有效天数设为-1，表示已经过期。
  • 由于setCookie方法默认设置路径为'/'，removeCookie在调用时无需显式指定路径，从而简化了删除操作。

四、Cookie vs localStorage

  • 存储位置：两者都存储在客户端浏览器。
  • 自动发送：Cookie随HTTP请求自动发送到服务器；localStorage不自动发送，需手动操作。
  • 容量：因为cookie每次都会随着http请求自动发送到服务器，所以一般限制在4KB左右；而localStorage提供更大存储空间，通常为5MB。
  • 生命周期：Cookie可设置失效时间，过期自动删除；localStorage除非主动删除，否则持久存储。
  • 用途：Cookie常用于会话管理、用户跟踪；localStorage适合存储大量用户数据，如设置、离线内容。

五、结语

今天认识了除localStorage之外的又一web存储，cookie。知道了它常见的应用场景，也了解了其中一些属性的含义，并且自己手写函数来方便管理cookie。在最后还比较了两种存储的异同。看到最后，希望对你能有一些帮助，一起加油！✌️

转载自:https://juejin.cn/post/7385132376584945701
评论
请登录