Cookie

bubbleJessica

于 2023-01-14 15:07:21 发布

阅读量473

点赞数 1

分类专栏： ES 文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128680043

版权

ES 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Cookie是浏览器存储数据的一种方式因为存储在用户本地，而不是存储在服务器上，是本地存储，一般会自动随着浏览器每次请求发送到服务器端

Cookie作用：利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等（Cookie可以记录这些信息，随着请求发送到服务器端，服务器端就可以利用这些信息，一方面可以提供用户个性化服务，了解用户行为的工具）

浏览器获取Cookie：document.cookie 记住cookie与cookie之间用;空格分开

不要再cookie保存密码敏感信息

编辑器写入和读取cookie

document.cookie='username=zs';
document.cookie='age=18';
// 只能一个一个写入cookie
// 只能一次性读取所有cookie，以字符串形式展现 多个cookie之间用;空格隔开
console.log(document.cookie);

Cookie的属性

name value必须写失效时间根据需要设置

// 1.Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码
    // 读取时使用decodeURIComponent()解码
    document.cookie=`username=${encodeURIComponent('张三')}`;
    document.cookie=`${encodeURIComponent('用户名')}=${encodeURIComponent('李四')}`;
    console.log(`${decodeURIComponent(document.cookie)}`);

    // 2.失效时间
    // 对于失效的Cookie，会被浏览器清除
    // 如果没有设置失效时间，默认Cookie称为会话Cookie
    // 它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失
    // 如果想长时间存在的话，设置Expires或Max-Age属性
    // expires属性值类型为Date类型
    document.cookie=`username=Alex; expires=${new Date(
       '2100-1-01 00:00:00'
    )}`;
    
    // max-age属性值类型为数字，表示当前时间+多少秒后过期，单位是秒
    document.cookie='username=Alex;max-age=5';
    // 如果max-age的值为0或者负数，则Cookie会被删除

Domain属性：使用js只能读写当前域或父域的Cookie，无法读写其他域的Cookie

www.imooc.com当前域 .imooc.com父域

// 3.Domain域 限定了访问Cookie范围（不同域名）
    document.cookie='username=Alex; domain=www.imooc.com'

    // 4.Path路径
    // Path限定了访问Cookie的范围（同一个域名下）

Path属性：使用js只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie

如果设置path为/course，当前页面为imooc.com/course/list是可以访问cookie，而首页imooc.com是访问不到cookie的（类似作用域）

当name domain和path三个属性一样的时候，同名就会覆盖

HttpOnly属性：设置了HttpOnly属性的Cookie不能通过js去访问

Secure属性：限定了只有在使用https的情况下才可以将Cookie发送给服务端

结论：只有domain、path和secure满足条件时，才可以将cookie发送到服务端

Cookie的封装

cookie.js中分别写set、get、remove方法

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;
}
// set('username','alex');
// document.cookie='username=alex; max-age=5; domain='

const get = name => {
    name = `${encodeURIComponent(name)}`;
    // 'username=alex; age=18; sex=male'
    const cookies = document.cookie.split('; ');
    // ["username=alex", "age=18", "sex=male"]
    for (const item of cookies) {
        const [cookieName, cookValue] = item.split('=');
        // ["username","alex"]
        if (cookieName === name) {
            return decodeURIComponent(cookValue);
        }
    }
    return;
}

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">
    <title>Cookie的封装</title>
</head>
<body>
  <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
    });

    remove('用户名');
    remove('username');
    console.log(get('username'));
    console.log(get('age'));
    console.log(get('用户名'));
    console.log(get('sex'));
  </script>
</body>
</html>

通过控制台，我们可以看出上面写的代码完全没问题

使用封装好的 Cookie 实现网站语言切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie的封装</title>
</head>
<body>
<button id="cn">中文</button>
<button id="en">英文</button>
<script type="module">
    import {set} from './cookie.js';

    // 使用封装好的Cookie实现网站语言切换
    const cnBtn = document.getElementById('cn');
    const enBtn = document.getElementById('en');

    cnBtn.addEventListener('click', () => {
        set('language', 'cn', {
            maxAge: 30 * 24 * 3600
        });
        window.location = './02. cookie的封装.html';
    }, false);

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