js中的cookie

最新推荐文章于 2024-10-05 07:56:51 发布

=清风徐来=

最新推荐文章于 2024-10-05 07:56:51 发布

阅读量263

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： cookie

本文链接：https://blog.youkuaiyun.com/weixin_43801564/article/details/88041837

前端专栏收录该内容

28 篇文章

订阅专栏

本文探讨了在本地调试环境下Chrome浏览器对document.cookie操作的限制，介绍了setCookie和getCookie方法，以及如何利用cookie实现登录状态保持。深入解析了cookie的工作原理及在客户端存储用户信息的重要性。

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

1、本地调试出现无法操作document .cookie的问题

使用chrome浏览器在本地是无法操作document.cookie的（IE，firefox都可以），当然如果页面部署到服务器上都是可以操作的；

2、对cookie进行操作的一些方法

浏览器中的cookie主要是格式如下，格式为key1=value1;key2=value2;key3=value3的格式
在这里插入图片描述
本质上使一串以分号（；）分割，等号（=）连接的字符串，因此可以使用操作字符串的方法进行处理
（1）setCookie

function setCookie(key,value,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

每次给document.cookie赋值并不会覆盖旧的cookie，而是会在原来的cookie后面进行追加一段字符串
（2）getCookie
可以用来获取cookie中的某个key对用的value，同样可以用来判断cookie中是否有某个key

function getCookie(key) {
            key = key + '=';
            var cookieStr = document.cookie;
            var cookieArr = cookieStr.split(';');
            for (let i = 0; i < cookieArr.length; i++) {
                let curCookieStr = cookieArr[i].trim();
                if (curCookieStr.indexOf(key) > -1) {
                    return curCookieStr.substr(key.length);
                }
            }
            return ''
    }

3、关于cookie的一些问题

（1）什么是cookie
cookie主要用来在客户端保存用户的个人信息。由于http的无状态性，服务器无法从网络连接上得知用户的身份信息，cookie就相当于通行证的作用，每次访问服务器的时候就带上cookie（通行证），服务器就能够得知用户的省份信息了。
cookie实际上就是一段文本信息，当浏览器中需要长久保存用户的个人信息时，服务器就可以通过response发送一段cookie给客户端浏览器。而浏览器就可以把cookie保存起来，之后请求服务器时，就可以将cookie发送过去，服务器接收到之后，就可以辨明用户的个人信息了。

（2）如何使用cookie实现登录态的保存

之前看过一种实现方式是，首先用户进行登录，输入账号密码，然后请求接口，查询数据库，查询成功后，接口对账号根据一定规则进行加密，然后将加密之后的秘钥返回到前端。前端可以将账号和秘钥保存在cookie中。之后每次打开相应的网站时，就将cookie发送给服务器，将账号进行加密之后与秘钥进行比较是否一致即可。
可以借助服务器的session实现。每次用户登录之后，服务器会在内存中生成一个session对象，同时会返回一个sessionid存放在cookie中，然后之后每次用户打开网站，发送cookie到服务器，通过这个sessionid来获取对应的session对象。如果获取不到session对象，说明用户登录态失效了。