如何使用cookie.js管理浏览器中的Cookie？

cookie.js 是一个用于处理 HTTP cookies 的 JavaScript 库。它提供了设置、获取和删除 cookies 的方法，方便在客户端与服务器之间进行数据交换。

1、基本用法

创建 Cookie：可以使用Cookies.set(name, value) 创建一个在整个站点都可用的 cookie。Cookies.set('username', 'john_doe') 会创建一个名为 “username”、值为 “john_doe” 的 cookie，如果要设置 cookie 的有效期为 4 天，可以使用Cookies.set('session_id', 'abc123', { expires: 4 })，注意，expires 的单位默认为“天”，也可以通过设置一个具体的日期来指定有效期，如var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000); Cookies.set('foo', 'bar', { expires: inFifteenMinutes }) 可以设置 cookie 有效期为 15 分钟。

读取 Cookie：使用Cookies.get(name) 可以读取某个 cookie 的值，cookie 不存在则返回undefined。Cookies.get('username') 会返回 “john_doe”，也可以使用Cookies.get() 读取所有可见的 cookie，返回一个包含所有 cookie 键值对的对象。

删除 Cookie：使用Cookies.remove(name) 可以删除某个 cookie，如果要删除当前页面所在路径下的某个有效的 cookie，需要先通过path 属性将其设置为当前路径，然后再删除，如Cookies.set('name', 'value', { path: '' }); Cookies.remove('name', { path: '' })。

2、JSON 支持

存储 JSON 数据：当创建 cookie 时，可以将 Array 或 Object 作为值，js-cookie 会自动将数据用JSON.stringify 转换为字符串保存。Cookies.set('user', { name: 'John', age: 30 }) 会将对象转换为 JSON 字符串后存储到 cookie 中。

读取 JSON 数据：读取 cookie 值时，可以使用Cookies.getJSON(name) 直接获取解析后的 JSON 对象。Cookies.getJSON('user') 会返回{ name: 'John', age: 30 }。

3、其他常用属性

path：表示此 cookie 对哪个地址可见，默认为 “/”。Cookies.set('name', 'value', { path: '/admin' }) 设置的 cookie 只能在 “/admin” 路径及其子路径下访问。

domain：表示此 cookie 对哪个域名可见，设置后 cookie 会对所有子域名可见，默认为对创建此 cookie 的域名和子域名可见。Cookies.set('name', 'value', { domain: '.example.com' }) 设置的 cookie 在 “example.com” 及其所有子域名下都可以访问。

secure：表示 cookie 传输是否仅支持 https，默认为不要求协议必须为 https，如果设置为true，则表示 cookie 将仅通过 HTTPS 协议传输。

4、示例代码

创建和读取 Cookie：以下是一个使用 js-cookie 创建和读取 Cookie 的简单示例：

     import Cookies from 'js-cookie';
     // 创建 Cookie
     Cookies.set('username', 'john_doe');
     Cookies.set('session_id', 'abc123', { expires: 7 }); // 有效期为 7 天
     // 读取 Cookie
     const username = Cookies.get('username');
     console.log(username); // 输出 'john_doe'
     const sessionId = Cookies.get('session_id');
     console.log(sessionId); // 输出 'abc123'
     // 读取所有 Cookie
     const allCookies = Cookies.get();
     console.log(allCookies); // 输出所有 Cookie 的键值对

删除 Cookie：以下是一个删除 Cookie 的示例：

     import Cookies from 'js-cookie';
     // 删除 Cookie
     Cookies.remove('username');
     Cookies.set('session_id', 'abc123', { path: '' });
     Cookies.remove('session_id', { path: '' }); // 删除当前路径下的 Cookie

FAQs

1、如何设置 Cookie 的过期时间为相对时间？

可以通过设置max-age 属性来指定 Cookie 的过期时间为相对时间（单位为秒）。document.cookie = "username=john_doe; max-age=3600"; 可以设置一个名为 “username”、值为 “john_doe” 的 cookie，其有效期为 1 小时（3600 秒）。

2、如何在子页面中删除父页面设置的 Cookie？

如果子页面要删除父页面设置的 cookie，需要确保在删除 cookie 时指定与设置 cookie 时相同的路径和域名，如果父页面设置了document.cookie = "username=john_doe; path=/; domain=example.com";，那么子页面在删除该 cookie 时需要使用document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";。

小编有话说

cookie.js 是一个非常方便的工具，用于在 JavaScript 中操作 cookie，它提供了简洁的 API，使得创建、读取、更新和删除 cookie 变得非常容易，无论是在前端开发中处理用户登录状态、购物车信息，还是在后端开发中进行会话管理等，cookie.js 都能发挥重要作用，它也支持 JSON 格式的数据存储，以及对 cookie 的各种属性进行灵活设置，满足了不同场景下的需求，在使用 cookie.js 时，要注意遵守相关的隐私政策和安全规范，避免存储敏感信息。