js Cookie总结

最新推荐文章于 2022-05-26 21:05:37 发布

原创最新推荐文章于 2022-05-26 21:05:37 发布 · 735 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cookie #浏览器 #Web前端

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Cookie的基本概念及其在浏览器中如何实现跨页面数据共享。详细解释了Cookie的设置方法，包括键值对、有效期、路径及域等参数，并提供了实用的JavaScript函数来帮助设置和获取Cookie。

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

Cookie

Cookie是保存在浏览器上的数据，浏览器在访问同一域名下的各个网页时会把这个域下的所有Cookie都发送给服务器，以达到在不同页面之间共享数据的效果。
默认情况下出于安全考虑只允许同一域名下同一文件夹下的所有文件共享Cookie，可以设置跨域，但最多也只能同一一级域名下的所有页面共享Cookie。
因为Cookie是保存在浏览器上的，所以Cookie只能识别一个浏览器。

Cookie的设置

Cookie通过键值对的方式存储数据
//添加一条Cookie记录
document.cookie="key=value;expires=exp;path=/;domain=siteDomain";
key和value表示键值数据必须有，其他数据则都是可选的。
expires 是Cookie过期的时间，使用Data类的toUTCString()形式进行设置
path表示Cookie所处的路径若要跨路径可设置为“/”，domain表示Cookie所处的域至少设置为一级域名
若要添加另一条Cookie记录，再次设置document.cookie就行，例如
document.cookie="key2=value;expires=exp;path=/;domain=siteDomain";
以下函数可以设置Cookie信息

function setCookie(key, value, exp, path, domain){
    var data = key + "=" + value;
    document.cookie="key=value;expires=exp;path=URLpath;domain=siteDomain";
    if(exp){
        data = data + ";expires=" + exp;
    }
    
    if(path){
        data = data + ";path=" + path;
    }
    
    if(domain){
        data = data + ";domain=" + domain;
    }
    document.cookie = data;
}
//使用:
var date = new Date();
date.setMonth(date.getMonth() + 6);
setCookie("key", "value", date.toUTCString(), "/");

Cookie的读取

document.cookie属性保存着所有Cookie的键值数据，例如有两条Cookie数据
"k1=v1;path=/"
"k2=v2;path=/"
则读取document.cookie属性为“k1=v1; k2=v2"（不同的键值对之间用"; "分号加一个空格分隔）
以下函数可以读取某条Cookie的值

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