浅显易懂的cookie的使用（设置和获取cookie缓存）

最新推荐文章于 2025-04-02 14:00:59 发布

前端陈伟霆

最新推荐文章于 2025-04-02 14:00:59 发布

阅读量1.4k

点赞数 5

分类专栏： js 文章标签： js cookie javascript jquery

本文链接：https://blog.youkuaiyun.com/weixin_43927397/article/details/105658614

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了JavaScript中如何使用cookie进行数据缓存，包括cookie的定义、设置方法、获取方式以及删除操作。通过document.cookie可以对cookie进行操作，设置时需要注意'path'属性来决定cookie的作用范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中cookie的使用（设置和获取cookie缓存）

生为一个已经入职一年多的前端小白，第一次写博客还有点小激动，有不足的地方还希望大家多多指出，因为最近项目有涉及到利用cookie缓存数据，所以在这边再巩固一下。

1、cookie的定义

在使用浏览器中，经常涉及到数据的交换，比如你登录系统账号，登录一个页面。我们经常会在此时设置记住账号啥的，或者自动登录选项。那这些都是怎么实现的呢，答案就是今天的主角cookie了，Cookie是由HTTP服务器设置的，保存在浏览器中，但HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。
从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。
在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言（如PHP）也可以存取 cookie。

2、cookie的使用

设置cookie

function setCookie(c_name, value, expiredays) {
       var exdate = new Date()
       exdate.setDate(exdate.getDate() + expiredays)
       document.cookie = c_name + "=" + escape(value) +
           ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())+";path=/";
   }

调用该方法如：

var userId="123456";
setCookie("userId", userId, 30);

下面是里面参数的意义

参数	含义
c_name	自己定义的cookie名称
value	需要放在定义的c_name 中的值
expiredays	cookie的有效期

这里有一个要注意点就是 " path=/"
" path=/"是只存下的cookie再该项目所有页面都能去获取，如果你想只存到弄个特定目录可以在path中指定路径，如：“path=/views/myHomePage”,z这样你可以在/views/myHomePage文件下所有页面都能取到你存的cookie了。

取回cookie

 function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=")
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1
                c_end = document.cookie.indexOf(";", c_start)
                if (c_end == -1) c_end = document.cookie.length
                return unescape(document.cookie.substring(c_start, c_end))
            }
        }
        return ""
    }

调用该方法如：

var newUserId= getCookie("userId");
console.log(newUserId)
alert(newUserId)

3、删除cookie

//清除cookie  
function clearCookie(name) {  
    setCookie(name, "", -1);  
}

今天的cookie总结就到这里了，如果里面有不对的地方希望各位大佬帮我指出来，如果觉得小博写的还不错，不妨给个关注，哈哈哈。