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>
posted @ 2022-01-24 21:54  13522679763-任国强  阅读(69)  评论(0)    收藏  举报