首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js怎么设置cookie的值

在JavaScript中,可以通过document.cookie属性来设置、读取和删除cookie。以下是如何设置cookie值的详细步骤和示例:

基本语法

代码语言:txt
复制
document.cookie = "键=值; expires=过期时间; path=路径; domain=域名; secure; samesite";

详细说明

  1. 键和值:这是cookie的名称和值,例如username=JohnDoe
  2. expires:设置cookie的过期时间,格式为GMT字符串。如果不设置,cookie会在会话结束时(通常是关闭浏览器)被删除。
  3. expires:设置cookie的过期时间,格式为GMT字符串。如果不设置,cookie会在会话结束时(通常是关闭浏览器)被删除。
  4. path:指定cookie的路径。默认情况下,cookie在整个网站都有效。可以设置为特定路径,例如/path
  5. domain:指定cookie的域名。默认情况下,cookie在当前域名及其子域名下有效。
  6. secure:如果设置,cookie只能通过HTTPS协议传输。
  7. samesite:设置cookie的SameSite属性,用于防止跨站请求伪造(CSRF)攻击。可选值有StrictLaxNone

示例代码

以下是一个设置cookie的示例:

代码语言:txt
复制
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/; samesite=Lax";
}

// 使用示例
setCookie("username", "JohnDoe", 7); // 设置一个名为username的cookie,值为JohnDoe,过期时间为7天

读取cookie

代码语言:txt
复制
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 使用示例
console.log(getCookie("username")); // 输出: JohnDoe

删除cookie

代码语言:txt
复制
function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999; path=/; samesite=Lax';
}

// 使用示例
eraseCookie("username"); // 删除名为username的cookie

注意事项

  • 安全性:尽量避免在cookie中存储敏感信息,因为cookie可以被客户端脚本访问。
  • 大小限制:每个域名下的cookie总数和单个cookie的大小都有限制(通常每个域名下最多20个cookie,每个cookie最大4KB)。
  • 跨域问题:cookie默认情况下不能跨域共享,需要设置合适的domainpath属性。

通过以上方法,你可以在JavaScript中灵活地设置、读取和删除cookie。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

axios发送cookie_js跨域设置cookie

大家好,又见面了,我是你们的朋友全栈君。...,解决请求跨域需要后端配合处理,下面直接看代码,这里的 demo 中,前端运行在 localhost:1234,后端运行在 localhost:3000,不满足同源协议 axios发起请求 import...console.log(data) } catch (e) { console.warn(e) } })() 在后端不做处理时,页面会报错 QQ20180530-233625@2x.png 后端只需要按照提示设置响应头就可以了...,携带 cookies 了,如不涉及跨域情况,则去掉对于 origin 的设置即可 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

8.5K40
  • js 设置html标签样式表,js怎么设置css样式?

    js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。...1、直接设置style对象(内联样式) 使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。...此对象允许我们指定CSS属性并设置其值。...例如,这是设置id 值为demo的HTML元素的字体颜色、背景颜色、的样式:var myElement = document.querySelector(“#demo”); // 把颜色设置成紫色 elem.style.color...以上就是js怎么设置css样式?的详细内容,更多请关注html中文网其它相关文章! 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    24K30

    js对cookie的操作

    = key + "=" + formatValue + expires; } 我们设置的过期时间以天为单位,当你想关闭浏览器时就cookie就直接失效,则可不传入days,当不对cookie设置任何正...、负或0时间,也就是说对expire不设置,他就会在浏览会话结束时过期。...获取cookie值 上面已经说过了document中存储cookie的形式了,而且过期的cookie不会出现在document.cookie中,这样我们在获取的时候只需要将其进行格式化即可: let getCookie...,将值转成数组返回 } } //如果cookie中 没有我们想获取的键值,直接返回一个空数组 return []; } //如果cookie...中没有数据,直接返回一个空数组 return []; } 删除cookie 删除cookie最简单的办法就是给cookie的过期时间设置一个过去的时间,让他过期就好: let removeCookie

    6.7K30

    JS 中 cookie 的使用

    然后通过查询数据库的信息来恢复购物车里的物品   ③、页面之间的传值。在实际开发中,我们往往会通过一个页面跳转到另外一个页面。后端服务器我们可以通过数据库,session 等来传递页面所需要的值。...3、怎么使用 cookie?   ...;如果没有设置,则默认在当前域名访问     比如设置 test*.com 表示域名为test*.com的服务器共享该Cookie     五、secure=true|false  可选参数,默认是 true...不安全传输 安全设置,指明必须通过 安全的通信通道来传输(https) 才能获得 cookie,true 不安全,默认值;false 安全,必须通过 https 来访问     比如:如果你设置 document.cookie...的值 //多个cookie 保存的时候是以 ;空格 分开的 var arrStr = document.cookie.split(";

    6.2K70

    输入框的默认值是怎么设置的?

    设置输入框默认值可以提高用户体验,使用户更清楚地了解输入框的用途,同时也可以减少用户输入错误的机会。...在不同的应用场景中,设置输入框默认值的方法也有所不同: HTML:可以通过value属性来设置输入框的默认值。...例如,document.getElementById("myInput").setAttribute("value", "动态设置的默认值");会在JavaScript代码执行时设置输入框的值为"动态设置的默认值...Element UI(一个基于Vue.js的组件库):可以使用v-model指令来绑定输入框的值,并通过data属性设置初始值。...避免混淆:当用户开始输入时,应清除默认值或占位符,确保用户输入的内容不会被错误地提交。 动态设置:在某些情况下,可能需要根据用户的交互动态设置默认值。

    26210

    跨域无法设置cookie的问题

    记录一个今天在练习nodejs的时候遇到的一个跨域无法存取cookie的问题 我想实现的功能就是:在登录页面输值进行登录之后可以把用户的信息存入到cookie中,判断用户是否在登录状态。...image.png 但是当我去Application去找cookie的值时候发现里面并没有值。...image.png 于是纠结了大半天,最后找出原因是因为跨域而造成的,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie,所以我们没办法存取值。...",true); //因为设置允许携带cookie之后那么请求头Access-Control-Allow-Origin的值就不能设置为*,所以要另外指向一个 res.setHeader("Access-Control-Allow-Origin...","http://localhost:8089/"); 以上两步是大多数博客的解决方案:最好的还是自己再本机地址访问,避免跨域存取cookie值,就不会出现这么棘手的问题了。

    6.8K00

    Java后端Cookie工具类(设置Cookie有效时间、得到Cookie的域名等方法)

    在这里总结一些后端处理Cookie的工具类方法,供参考 调用就可以这样 // 设置cookie CookieUtils.setCookie(request, response, "user", JSONObject.toJSONString...Cookie的值 不设置生效时间默认浏览器关闭即失效,也不编码 * @param request * @param response * @param cookieName...Cookie的值 不设置生效时间,但编码 * 在服务器被创建,返回给客户端,并且保存客户端 * 如果设置了SETMAXAGE(int seconds),会把cookie保存在客户端的硬盘中...* 如果没有设置,会默认把cookie保存在浏览器的内存中 * 一旦设置setPath():只能通过设置的路径才能获取到当前的cookie信息 * @param request...e) { e.printStackTrace(); } } /** * * @Description: 设置Cookie的值

    1.6K10

    登陆后设置cookie的方法

    System.DateTime.Now.AddMinutes(30); HttpContext.Current.Response.Cookies.Add(myCookie); } 这是我登陆后设置...cookie的方法,本来cookieValueName是用FormsAuthentication.FormsCookieName替代的,突然有一天发总是得到null值,(目前情况也不明,可能是多个cookie...的问题[也不太像,之前好好的,突然就变了]) 之后,直接改名传固定值"CQSPACE",之后也一直发现得不到值,换了N种Cookie写法,N种修改方法,也发现无效,两天后,新建一工程,发现可以得到值,...就是自己的项目无法值,今天,新建了几个值,发现就除了CQSPACE之外的值都可以得到,就是得不到CQSPACE的值..突然灵感一到,才想起了FromsAuthentication.FormsCookieName...的值也叫cqspace(这里大小写是不区分的) 最终解决方案:把WebConfig的<form name="cqspace" de..

    1.5K70

    Node.js 小知识 — HTTP 请求与响应如何设置 Cookie 信息

    本文来自 “Nodejs技术栈” 一位读者的一个问题,“Node.js 发起 HTTP 请求时,怎么携带上 cookie 信息?”...通常我们在浏览器向服务器发起一个请求,浏览器会检查是否有相应的 Cookie(浏览器的安装目录下有个 cookie 文件夹用来存放各个域下设置的 cookie 信息),如有则自动添加到 Request...这是浏览器的行为会自动帮我们做,那么如果一个 Node.js 做为客户端呢?...下面我们用 Node.js 提供的系统模块 HTTP[3] 看看如何实现。...这是客户端的请求方法实现,我们可以在 headers 中直接设置 Cookie 字段,也可通过 http.request 返回的 req 对象调用 setHeader() 方法设置。

    5.6K20

    asp.net dropdownlist的值怎么设置_ASPNET程序开发招聘

    大家好,又见面了,我是你们的朋友全栈君。 我刚刚开始学习ASP.NET,所以当然有点辛苦,懂的不是很多… 今天写程序时碰到了控件 DrowDownList.–列表控件…....当我改变控件的值时,怎么也不能改变另一个DropDownList控件的值,查了MSDN之后才知道--原来我的 AutoPostBack属性没有设置成”true” 所以不能刷新,但是当我改完之后确实能够刷新了...,但是每次刷新之后并不能改变需要触发事件的那个控件的值; 上网查了一些 先总结如下: 1.事件触发之前都会执行 Page_Load事件--我的初始化全部放在上述事件中,因此不能改变 2.修改方法:...IsPostBack)之后就能实现你所要求的功能了………………… 见笑了.. 文笔不怎么样… 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.2K40
    领券