// 读取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>