JavaScript--Cookie

Onlooker﹒

已于 2023-08-09 10:41:20 修改

阅读量499

点赞数 2

分类专栏： JavaScript 文章标签： javascript 服务器

于 2023-08-07 10:16:46 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/132140358

版权

JavaScript 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript中的Cookie工作原理，包括创建、设置过期时间、指定路径、读取和删除Cookie的方法，以及注意事项如大小限制和跨域规则。同时提供了示例代码以演示各项操作。

摘要由CSDN通过智能技术生成

什么是 Cookie？

在JavaScript中，cookie是一种小型的文本文件，它存储在用户的计算机上。通过使用cookie，网站可以向用户的浏览器发送数据，并将该数据保留在浏览器中，使网站能够在不同页面之间传递数据或存储用户偏好设置，以便在后续访问中进行读取和使用。

创建Cookie：

要创建一个cookie，可以使用document.cookie属性进行设置。document.cookie是一个字符串，其中包含当前与网站相关联的所有cookie。要创建一个名为cookieName的cookie，其值为cookieValue，可以使用以下语法：

document.cookie = "cookieName=cookieValue";

此时，cookie将被存储在浏览器中。

设置过期时间：

可以通过为cookie添加expires属性来设置cookie的过期时间。例如，如果要将cookie的过期时间设置为2023年12月31日23:59:59 UTC，可以这样写：

document.cookie = "cookieName=cookieValue; expires=Thu, 31 Dec 2023 23:59:59 UTC";

当达到过期时间时，浏览器将自动删除该cookie。

指定路径：

可以通过为cookie添加path属性来指定cookie的可访问路径。默认情况下，cookie只能在创建它的页面及其子目录中访问。如果要使cookie在整个网站范围内都可访问，可以将path设置为根目录：

document.cookie = "cookieName=cookieValue; path=/";

读取Cookie：

要读取cookie的值，可以使用document.cookie来获取当前与网站相关联的所有cookie。通常，cookie值将存储在一个字符串中。为了提取特定cookie的值，可以使用正则表达式或其他字符串处理方法。下面是一个示例，展示如何获取名为cookieName的cookie值：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)cookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1");

这将从document.cookie字符串中提取名为cookieName的cookie的值，并将其存储在变量cookieValue中。

删除Cookie：

要删除cookie，可以通过将过期时间设置为过去的时间来使其过期，从而让浏览器自动删除cookie。例如，要删除名为cookieName的cookie，可以执行以下操作：

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

这将将cookie的过期时间设置为过去的时间，使其立即过期并被删除。

注意:

需要注意的是，JavaScript Cookie有一些限制。浏览器对cookie的数量和大小都有限制。此外，由于安全原因，浏览器还实施了跨域设置，限制网站在不同域之间访问cookie。更复杂的操作和cookie设置可以使用第三方库来简化处理，例如js-cookie等。

示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>Cookie操作示例页面</title>
</head>
<body>
    <h1>Cookie操作示例页面</h1>

    <!-- 创建Cookie按钮 -->
    <button id="createBtn">创建Cookie</button>

    <!-- 读取Cookie按钮 -->
    <button id="readBtn">读取Cookie</button>

    <!-- 修改Cookie按钮 -->
    <button id="updateBtn">修改Cookie</button>

    <!-- 设置Cookie过期时间按钮 -->
    <button id="expireBtn">设置过期时间</button>

    <!-- 删除Cookie按钮 -->
    <button id="deleteBtn">删除Cookie</button>

    <!-- JavaScript代码 -->
    <script>
        // 创建Cookie按钮点击事件处理函数
        document.getElementById("createBtn").addEventListener("click", function() {
            document.cookie = "myCookie=Hello World";
            alert("已创建Cookie");
        });

        // 读取Cookie按钮点击事件处理函数
        document.getElementById("readBtn").addEventListener("click", function() {
            var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            alert("Cookie的值为：" + cookieValue);
        });

        // 修改Cookie按钮点击事件处理函数
        document.getElementById("updateBtn").addEventListener("click", function() {
            document.cookie = "myCookie=How are you?";
            alert("已修改Cookie");
        });

        // 设置Cookie过期时间按钮点击事件处理函数
        document.getElementById("expireBtn").addEventListener("click", function() {
            var expirationDate = new Date();
            expirationDate.setFullYear(2023);
            expirationDate.setMonth(11); // 月份从0开始，11代表12月
            expirationDate.setDate(31);
            document.cookie = "myCookie=How are you?; expires=" + expirationDate.toUTCString();
            alert("已设置Cookie过期时间为2023年12月31日");
        });

        // 删除Cookie按钮点击事件处理函数
        document.getElementById("deleteBtn").addEventListener("click", function() {
            document.cookie = "myCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
            alert("已删除Cookie");
        });
    </script>
</body>
</html>

以上是一个包含创建、读取、修改、设置过期时间和删除Cookie的示例HTML页面。每个按钮都有一个唯一的id，并通过JavaScript代码绑定了对应的点击事件处理函数。点击不同的按钮会执行相应的操作，并弹出提示框显示相关信息。