Cookie的封装&Cookie的注意事项

Cookie的封装

1. Cookie 是浏览器存储数据的一种方式，存储在用户本地，而不是存储在服务器上，是本地存储

2.作用场景

　　网站的中英切换

　　利用Cookie跟踪统计用户访问该网站的习惯，可以作为了解用户行为的一种工具，以便给用户提供更人性化的使用体验

3.设置Cookie

　　不能一起设置，只能单独设置

4.读取Cookie

　　读取的是一个由名值对构成的字符串，每个名值对之间由“ ，”（一个分号和跟一个空格）隔开

 5.Cookie的名称（Name）和值（Value）

　　创建Cookie时必须填写，其他属性可以使用默认值

 

Cookie.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie的封装</title>
<!--    <script src="../static/js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <button id="cn">中文</button>
    <button id="en">英文</button>

<script type="module">
     import{set,get,remove} from 'cookie';
     import {set,get,remove} from 'cookie.js';
     set('username','alex');
     set('username','zs');
     set('age',18);
     set('用户名','张三');

     set('sex','male',{
         maxAge:30*24*3600,
     })

     remove('username');
     remove('用户名')

     console.log(get('username'));
     console.log(get('age'));
     console.log(get('用户名'));
     console.log(get('sex'));

    // 使用封装好的Cookie实现网站语言切换
    import {set} from '../static/js/cookie.js';
    const cnBtn = document.getElementById('cn');
    const enBtn = document.getElementById('en');

    cnBtn.addEventListener(
        'click',
        () => {
            set('language','cn',{
                maxAge:30 * 24 * 3600
            });
            window.location = 'Cookie.html';
        },
        false
    );

    enBtn.addEventListener(
        'click',
        () => {
            set('language','en',{
                maxAge:30 * 24 * 3600
            });
            window.location = 'Cookie.html';
        },
        false
    );
</script>

</body>
</html>
复制代码

 

Cookie.js

复制代码
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;
   
       // document.cookie='username=alex; max-age=5; domain='
   };
   
   // 通过name获取cookie的值
   const get = name => {
       name = `${encodeURIComponent(name)}`;
   
       const cookies = document.cookie.split('; ')
   
       for (const item of cookies) {
           const [cookieName,cookieValue] = item.split('=');
   
           if (cookieName === name) {
               return decodeURIComponent(cookieValue);
           }
       }
       return;
   };
   
   // 'username=alex; age=18; sex=male'
   // ['username=alex', 'age=18', 'sex=male']
   // ["username","alex"]
   
   // get('用户名');
   
   // 根据name、domain和path删除Cookie
   const remove = (name,{domain,path} = {}) =>{
       set(name,'',{domain,path,maxAge:-1});
   };
   
   export {set,get,remove};
复制代码

 

 

Cookie的注意事项

前后端都可以写入和获取Cookie

　　Cookie有数量限制

　　　　每个域名下的Cookie数量有限

　　　　当超过单个域名限制之后，再设置Cookie，浏览器就会清除以前设置的Cookie

　　Cookie有大小限制

　　　　每个Cookie的存储容量很小，最多只有4KB左右

posted @   漁夫  阅读(51)  评论(0)  编辑  收藏  举报
相关博文：
· Cookie的属性
· 初识Cookie&Cookie的基本用法
· Cookie的封装、Cookie的注意事项
· Cookie的封装以及注意事项
· Cookie的封装-2与Cookie 的注意事项
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示