0
点赞
收藏
分享

微信扫一扫

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>

举报

相关推荐

0 条评论