javascript 如何实现 cookie 操作

JavaScript可以通过document.cookie属性实现Cookie的操作。主要操作包括：创建、读取、更新和删除Cookie。 其中创建和更新使用相同的方式，只需设置document.cookie属性即可，而删除则是通过设置Cookie过期时间为一个过去的时间点来实现。读取则通过对document.cookie字符串进行解析来完成。

创建和更新Cookie 的关键在于构造正确的字符串。比如，为了创建一个名为user的Cookie，其值为John Doe，且它在7天后过期，可以使用以下代码：

document.cookie = "user=John Doe; max-age=" + 60*60*24*7 + "; path=/";

在这个例子中，max-age属性设置了Cookie的生存周期，path属性定义了Cookie在哪个路径下可以访问。

一、创建COOKIE

Cookie的创建是通过将一个字符串赋值给document.cookie完成的。这个字符串通常包含了Cookie的名称、值和其他可选的属性，如expires、max-age、path、domAIn和secure。

设置COOKIE值

document.cookie = "username=John Doe";

这个最简单的Cookie设置例子会创建一个会话级Cookie，一旦浏览器关闭，这个Cookie就会被清除。

设置COOKIE的有效期

const now = new Date();

now.setTime(now.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "username=John Doe; expires=" + now.toUTCString();

在这段代码中，我们创建了一个名为username的Cookie，它将在7天后过期。

二、读取COOKIE

Cookie的读取是通过解析document.cookie属性来实现的。因为document.cookie对象是一个由分号加空格分隔的字符串，其中包含了页面所有的Cookie（name=value对），所以通常需要一些逻辑来解析这个字符串，提取出我们需要的Cookie值。

读取特定COOKIE

function getCookie(name) {

    let cookieArray = document.cookie.split('; ');
    for(let i = 0; i < cookieArray.length; i++) {
        let cookiePair = cookieArray[i].split('=');
        if(name == cookiePair[0]) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

该函数可以通过传入Cookie名称来获取对应的值，并对值进行了URL解码。

三、更新COOKIE

更新Cookie和创建Cookie几乎是一回事，区别仅在于是否该Cookie已存在。如果我们要更新Cookie的值或过期时间，我们只需要再次设置document.cookie就可以了。

更新COOKIE的值

document.cookie = "username=Jane Smith; max-age=" + 60*60*24*7;

这段代码将更新username的值为Jane Smith，同时重新设置了其生存周期。

四、删除COOKIE

删除一个Cookie其实是将其过期时间设置为过去的某一时间点，通常我们会使用Unix时间起点，也就是1970年1月1日。

删除特定COOKIE

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

设置expires属性为一个过去的日期，使得该Cookie被删除。

通过上述的操作，我们可以控制网页中的Cookie，从而存储、传递和控制用户态等关键信息。考虑到现代的浏览器安全原则和隐私保护，我们在操作Cookie时还需要注意SameSite属性和Secure标志的使用以确保安全性。同时，为了兼容不同的浏览器，我们可能还需要对Cookie操作进行附加的判断和处理，确保功能的正常使用。

相关问答FAQs：

如何使用 JavaScript 设置一个 Cookie？

通过使用 JavaScript，你可以通过以下步骤设置一个 Cookie：

1. 首先，使用 document.cookie 属性来访问和修改当前页面的 Cookie 值。
2. 创建一个字符串，表示要设置的 Cookie 的名称和值。例如，var cookieString = "name=value";
3. 添加可选的选项，如过期时间、路径和域。例如，var expires = "; expires=Sun, 31 Dec 2023 23:59:59 GMT";，这将设置 Cookie 的过期时间为 2023 年 12 月 31 日。
4. 使用 document.cookie 属性将 Cookie 字符串分配给 Cookie。
   例如，document.cookie = cookieString + expires + "; path=/";

如何使用 JavaScript 读取 Cookie 的值？

要读取 Cookie 的值，可以通过以下步骤使用 JavaScript：

1. 使用 document.cookie 属性来访问当前页面的 Cookie 值。
2. 将 document.cookie 的值分割成一个数组，每个元素表示一个 Cookie 的键值对。
3. 遍历该数组，并找到所需的 Cookie 的值。你可以使用字符串的 split() 方法将 Cookie 字符串分割成一个数组，然后使用循环或其他方式查找特定 Cookie 的值。

以下是一个读取 Cookie 值的示例代码：

function getCookie(cookieName) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] === cookieName) {
      return decodeURIComponent(cookie[1]);
    }
  }
  return null;
}

var cookieValue = getCookie("name");
console.log(cookieValue);

如何使用 JavaScript 删除一个 Cookie？

要删除一个 Cookie，你可以使用以下步骤：

1. 首先，使用 document.cookie 属性访问和修改当前页面的 Cookie 值。
2. 获取要删除的 Cookie 的名称。
3. 将 Cookie 的过期时间设置为之前的日期。

以下是一个删除 Cookie 的示例代码：

function deleteCookie(cookieName) {
  document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

deleteCookie("name");

通过将 Cookie 的过期时间设置为过去的日期，浏览器将自动将该 Cookie 从浏览器中删除。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。