本地存储——Cookie

哈喽……

已于 2023-09-15 20:49:12 修改

阅读量1.1k

点赞数 2

分类专栏：前端文章标签：前端 javascript html

于 2023-09-05 10:30:24 首次发布

本文链接：https://blog.csdn.net/weixin_46515434/article/details/132638520

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本地存储——Cookie

认识Cookie
Cookie的基本用法
Cookie的属性
Cookie的封装
- 1.封装
- 2.使用封装的Cookie
Cookie的注意事项

认识Cookie

1.Cookie是什么

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

2.Cookie有什么用

利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等。

3.可以在浏览器中操作Cookie

不要在Cookie中保存密码等敏感信息。

Cookie的基本用法

写入Cookie

document.cookie = 'username=zs'
document.cookie = 'age=19'
//document.cookie = 'username=zs;age=19'   这种写法是错误的，不能一起设置，只能是一个一个设置

读取Cookie

console.log(document.cookie)

读取的是一个由名值对构成的字符串，每个名值对之间由;（一个分号和一个空格）隔开。读取到的是全部的cookie，原生的cookie不能根据名来读取值，但可以通过封装cookie来进行。

Cookie的属性

1.Cookie的名称（Name）和（Value）

这是最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值。
Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURIComponent()解码。

document.cookie = `username=${encodeURIComponent('张三)}`

一般名称使用英文字母，不要用中文，值可以用中文，但是要编码。

2.失效（到期）时间

对于失效的Cookie，会被浏览器清除。
如果没有设置失效（到期）时间，这样的Cookie称为会话Cookie，它在内存中，当会话结束，也就是浏览器关闭时，Cookie消失。
想长时间存在，需要设置expires或max-age
expires：值为Date类型

document.cookie = `username=zs;expires=${new Date('2100-02-02 00:00:00')}`

max-age:值为数字，表示当前时间+多少秒后过期，单位是秒

document.cookie = 'username=zs; max-age=5'

如果max-age的值是0或是负数，则Cookie会被删除

3.Domain域

Domain限定了访问Cookie的范围（不同域名）
使用JS只能读写当前域或父域的Cookie，无法读写其他域的Cookie

4.Path路径

Path限定了访问Cookie的范围（同一个域名下）
使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie
注意：当Name、Domain、Path这3个字段都相同的时候，才是同一个Cookie

Cookie的封装

1.封装

    // 写入 Cookie
    const set = (name, value, { maxAge, domain, path, secure } = {}) => {
        let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
        // 判断 maxAge 是否是数字
        if (typeof maxAge === 'number') {
            cookieText += `; max-age=${maxAge}`;
        }
        // 判断 domian,path,secure 是否存在
        if (domain) {
            cookieText += `; domain=${domain}`;
        }
        if (path) {
            cookieText += `; path=${path}`;
        }
        if (secure) {
            cookieText += `; secure`;
        }
        document.cookie = cookieText;
    };
    //获取 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;
    };
    //删除 Cookie
    //根据 name、domain、path 来确定是否是同一个 Cookie
    const remove = (name, { domain, path } = {}) => {
        set(name, '', { domain, path, maxAge: -1 })
    };
   //导出
    export { set, get, remove };

2.使用封装的Cookie

  <!DOCTYPE html>
    <html>
    <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>中英文切换</title>
    </head>
    <body>
    <button id="cn">中文</button>
    <button id="en">英文</button>
    <script type="module">
        //导入封装的 cookie 模块
        import { set, get, remove } from "./cookie.js";
        const cnBtn = document.getElementById('cn');
        const enBtn = document.getElementById('en');
        // 绑定 cn 的 click 事件
        cnBtn.addEventListener('click', () => {
        // 设置 cookie
        set('language', 'cn', { maxAge: 30 * 24 * 3600 });
        // 使用 window 的 location 属性来刷新页面
        window.location = './index.html';
        }, false)
        // 绑定 en 的 click 事件
        enBtn.addEventListener('click', () => {
        set('language', 'en', { maxAge: 30 * 24 * 3600 })
        window.location = './index.html';
       }, false)
    </script>
    </body>
    </html>