cookie 封装和使用
// 1 写入 cookie
// document.cookie = 'username=zs'
// document.cookie = 'age=18'
// 读取cookie (读取的是全部的cookie)
// console.log(document.cookie); // username=zs; age=18
/***
cookie 的名称或值如果包含非英文字母， 则写入时需要使用 encodeURLComponent()编码
读取时使用 decodeURLComponent() 解码
*/
// 2 设置过期时间
// document.cookie = `username=alex;expires=${new Date('2023-01-01 00:00:00')}`
// max-age
// 值为数字 表示当前时间 + 多少秒后过期，单位是秒
// document.cookie = `username=alex;max-age=5`
// 30 天
// document.cookie = `username=alex;max-age=${24 * 3600 * 30}`
// 如果 max-age 的值 是 0 或负数 则cookie 会被删除
// 3
// domain 域 （不同域名）
// domain 限定了访问 cookie 的范围 只能读写当前域 或父域的cookie
// www.baidu.com
// 父域 .baidu.com
// 4
// path 路径 (同一个域名)
// 限定了 访问cookie 的范围 （同一个域名下）
// 使用 js 只能读写当前路径 和上级路径的cookie 无法读写下级路径的 cookie
// document.cookie = `username=alex;path=/course/list`;
// 当 name domain path 这3个字段都相同的时候，才是同一个cookie
// 5 HttpOnly
// 设置了httponly 属性的 cookie 不能通过 js 去访问
// 6 secure 安全标志
// 限定了只有在使用了 https 而不是 http 的情况下 才可以发送给 服务端
// domain path secure 都要满足条件 还不能过期的 cookie 才能随着请求发送到服务器端
// 注意事项
// 1 前后端都可以写入 和获取 cookie
// 2 cookie 有数量限制
// 3 cookie 有大小限制 每个 cookie 的存储容量很小 最多只有 4kb 左右
----------------------------------
// 写入cookie
const set = (name,value,{maxAge,domain,path,secure} = {}) => {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
if(typeof maxAge === 'number'){
cookieText += `;max-age=${maxAge}`
}
if(domain){
cookieText += `;domain=${domain}`
}
if(path){
cookieText += `;path=${path}`
}
if(secure){
cookieText += `;secure`
}
document.cookie = cookieText
}
// 通过 name 获取 cookie 的值
const get = name => {
name = `${encodeURIComponent(name)}`
const cookies = document.cookie.split('; ') // ["age=18", "%E7%94%A8%E6%88%B7%E5%90%8D=%E5%BC%A0%E4%B8%89", "sex=male", "username=zs"]
for(const item of cookies){
const [cookieName,cookieValue] = item.split('=')
if(cookieName === name){
return decodeURIComponent(cookieValue)
}
}
return
}
// 根据 name, domain 和 path 删除 cookie
const remove = (name,{domain,path} = {}) => {
set(name,'',{domain,path,maxAge:-1})
}
export {
set,
get,
remove
}
-------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="cn">中文</button>
<button id="en">英文 </button>
<script type="module">
import {set,get,remove} from './cookie.js'
// set('username','alex')
// set('username','zs')
// set('age',18)
// set('用户名','张三')
// set('sex','male',{
// maxAge: 30 * 24 * 3600,
// // domain:'.imooc.com'
// })
// remove('username')
// remove('用户名')
// console.log(get('username'));
// console.log(get('age'));
// console.log(get('用户名'));
// console.log(get('sex'));
// 使用封装好的 cookie 实现网站语言切换
const cnBtn = document.getElementById('cn')
const enBtn = document.getElementById('en')
cnBtn.addEventListener('click',() => {
set('language','cn',{
maxAge:30 * 24 * 3600
})
// 刷新当前页面
window.location = '/'
},false)
enBtn.addEventListener('click',() => {
set('language','en',{
maxAge:30 * 24 * 3600
})
// 刷新当前页面
window.location = '/'
},false)
</script>
</body>
</html>
我是Eric,手机号是13522679763
分类:
浏览器数据存储
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
2021-01-24 runtime.js 引入 async 方法 js
2021-01-24 获取用户地址代码