当前位置：首页 > 行业动态 > 正文

cookic缓存数据js

admin
行业动态
2025-03-29
2

Cookie 是存储在客户端的键值对数据，用于记录用户信息和会话状态。JavaScript 可通过 document.cookie 进行读写操作。

Cookie 缓存数据在 JavaScript 中的应用

在 Web 开发中，Cookie 是一种用于存储少量数据在客户端的技术，这些数据可以包括用户偏好、会话信息、主题设置等，JavaScript 提供了多种方式来操作 Cookie，包括创建、读取、更新和删除，下面将详细介绍如何在 JavaScript 中使用 Cookie 进行数据的缓存。

创建 Cookie

要在 JavaScript 中创建一个 Cookie，可以使用document.cookie 属性，以下是创建 Cookie 的基本语法：

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

username=JohnDoe：这是要存储的数据，格式为键=值。

expires=Fri, 31 Dec 9999 23:59:59 GMT：这是可选的，指定 Cookie 的过期时间，如果不设置，浏览器会在会话结束时自动删除 Cookie。

cookic缓存数据js

path=/：这也是可选的，指定 Cookie 所属的路径，如果未指定，默认为当前文档的路径。

读取 Cookie

要从 JavaScript 中读取 Cookie，可以使用以下代码：

function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

这个函数接受一个参数cname，即 Cookie 的名称，并返回对应的值，如果没有找到相应的 Cookie，则返回空字符串。

更新 Cookie

更新 Cookie 实际上就是重新设置它的值，因为 Cookie 的键是唯一的，所以只需重新赋值即可：

cookic缓存数据js

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

这将更新名为username 的 Cookie 的值。

删除 Cookie

要删除一个 Cookie，可以将其过期时间设置为过去的某个时间点：

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

这将使名为username 的 Cookie 立即过期并被删除。

操作	方法	示例
创建	`document.cookie = "key=value; expires=date; path=/";`	`document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";`
读取	`getCookie(cname)`	`getCookie("username")`
更新	`document.cookie = "key=new_value; expires=date; path=/";`	`document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";`
删除	`document.cookie = "key=; expires=date; path=/";`	`document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";`