js cookie可选参数(document.cookie='name=张三;expires='+day;)

本文介绍了JavaScript中Cookie的可选参数及其使用方法,包括过期时间、路径、域名和安全设置等,并提供了设置示例。

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

js cookie可选参数(document.cookie='name=张三;expires='+day;)

一、总结

1、可用secure属性来设置安全协议传输

2、expire属性用的比较多,其它几个属性几乎不用

 

二、js cookie可选参数

cookie可选参数

  • expires=时间:过期时间

    默认值为浏览器关闭后过期(即会话结束后)

    将expires设置为过去的时间可以删除cookie

  • path:

    他指定了与cookie关联在一起的网页。默认值是在和当前网页同一目录的网页中有效。如果把path设置为'/',那么它对该网站的所有网页可见

  • domain:

    设定cookie的有效域名,一般使用默认值,即绑定当前域名,本地测试无效

  • secure:指定了网络上如何传输cookie.默认为普通http协议传输;若设置为安全的,将只能通过https安全协议才可以传输

 

 

三、代码

4-2

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9   /*
10   document.cookie='name=张三';
11   document.cookie='user='+encodeURIComponent('李四')
12   //alert(document.cookie)
13   //alert(decodeURIComponent(document.cookie))
14 
15   //复习Date对象
16   var day=new Date();
17   alert(day)
18   day.setDate(day.getDate()+7)
19   alert(day)
20   */
21   var day=new Date(); //1、Date对象的使用
22   day.setDate(day.getDate()-1)
23   document.cookie='name=张三;expires='+day; //2、多个属性之间;(分号)相连
24   alert(document.cookie)
25   </script>
26 </body>
27 </html>

 

4-3

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9   //path 一般情况使用默认值即可
10   var str='/D:/demo'
11   document.cookie='name=张三;secure'; //3、设置安全访问方法
12   alert(document.cookie)
13   </script>
14 </body>
15 </html>

 

<!DOCTYPE html> <html> <body> <button onclick="toggleTheme()">切换主题</button> <div id="login"> <input type="text" id="username" placeholder="用户名"> <button onclick="login()">登录</button> </div> <div id="user" style="display:none;"> <p>欢迎 <span id="name"></span></p> <button onclick="logout()">退出</button> </div> <script> function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';&#39;).shift(); } document.body.className = getCookie('theme&#39;) || 'light'; function toggleTheme() { const newTheme = document.body.className === 'light' ? 'dark' : 'light'; document.body.className = newTheme; document.cookie = `theme=${newTheme}; max-age=${365*24*60*60}; path=/`; } function login() { const username = document.getElementById('username&#39;).value; document.cookie = `user=${username}; max-age=3600; path=/`; document.getElementById('login&#39;).style.display = 'none'; document.getElementById('user&#39;).style.display = 'block'; document.getElementById('name&#39;).textContent = username; } function logout() { document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'; location.reload(); } if (getCookie('user&#39;)) { const username = getCookie('user&#39;); document.getElementById('login&#39;).style.display = 'none'; document.getElementById('user&#39;).style.display = 'block'; document.getElementById('name&#39;).textContent = username; } </script> <style> .light { background: #fff; color: #000; } .dark { background: #333; color: #fff; } </style> </body> </html><!DOCTYPE html> <html> <body> <button onclick="toggleTheme()">切换主题</button> <div id="login"> <input type="text" id="username" placeholder="用户名"> <button onclick="login()">登录</button> </div> <div id="user" style="display:none;"> <p>欢迎 <span id="name"></span></p> <button onclick="logout()">退出</button> </div> <script> document.body.className = localStorage.getItem('theme&#39;) || 'light'; function toggleTheme() { const newTheme = document.body.className === 'light' ? 'dark' : 'light'; document.body.className = newTheme; localStorage.setItem('theme', newTheme); } function login() { const username = document.getElementById('username&#39;).value; document.cookie = `user=${username}; max-age=3600`; document.getElementById('login&#39;).style.display = 'none'; document.getElementById('user&#39;).style.display = 'block'; document.getElementById('name&#39;).textContent = username; } function logout() { document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 GMT'; location.reload(); } if (document.cookie.includes('user=&#39;)) { login(); } </script> <style> .light { background: #fff; color: #000; } .dark { background: #333; color: #fff; } </style> </body> </html>解析两段代码的不同,和实现功能的关键代码
最新发布
05-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值