js-cookie 是一个简单、轻量的 JavaScript API,用于处理浏览器 cookies。它提供了一种方便的方式来创建、读取和删除 cookies,而不需要直接操作 document.cookie。以下是对 js-cookie 的详细介绍:

特点

  • 简单易用:js-cookie 提供了简单的方法来操作 cookies,如 Cookies.set、Cookies.get 和 Cookies.remove,使得 cookie 操作直观易懂。

  • 兼容性好:支持所有现代浏览器,包括旧版浏览器如 Internet Explorer 6+。

  • 轻量级:压缩后的文件大小仅约 5KB,不会对页面加载性能产生显著影响。

  • 模块化:支持 CommonJS、AMD 以及 ES6 模块导入方式,便于在各种项目中使用。

基本用法

以下是 js-cookie 的一些基本用法示例:

  1. 设置 Cookie:

    import Cookies from "js-cookie";
    Cookies.set('name', 'value');

    可以设置 cookie 的过期时间、路径、域等属性。例如,创建有效期为 7 天的 cookie:

    Cookies.set('key', 'value', { expires: 7 }); // 7 天后失效

    也可以设置时间戳来处理时间,以实现更精确的过期时间控制

  2. 读取 Cookie:

    const value = Cookies.get('name');

    如果 cookie 不存在,则返回 undefined。还可以获取所有可见的 cookie:

    const allCookies = Cookies.get();

    3.删除 Cookie:

    Cookies.remove('name');

    如果要删除指定路径的 cookie,需要提供相应的路径参数:

    Cookies.remove('name', { path: '' });

    4.设置默认属性: 使用 Cookies.withAttributes 方法可以设置默认属性,如路径、域等:

    Cookies.withAttributes({ path: '/', domain: '.example.com' });

    5.Cookie 属性:

    • expires:设置过期时间,可以是天数或 Date 对象。

    • path:设置 cookie 的路径,默认为 '/'。

    • domain:设置 cookie 的域,默认为当前请求的地址。

    • secure:设置 cookie 是否仅通过 HTTPS 发送,默认为 false。

    • httpOnly:设置 cookie 是否仅通过 HTTP(S) 发送,不提供给客户端 JavaScript,默认为 true。

    • sameSite:设置 cookie 的同站策略,可以是 'strict'、'lax' 或 true(映射到 'strict')。

安装

可以通过 npm 或直接在 HTML 文件中引入 js-cookie:

  1. npm 安装:

    npm install js-cookie

    示例代码

    以下是使用 js-cookie 的一个完整示例:

    import Cookies from 'js-cookie';
    
    // 设置 cookie
    Cookies.set('username', 'tanggaowei', { expires: 10, path: '' });
    
    // 读取 cookie
    const username = Cookies.get('username');
    console.log(username);
    
    // 删除 cookie
    Cookies.remove('username');

    通过使用 js-cookie,可以方便地在前端进行数据缓存和用户状态管理,同时避免了直接操作 document.cookie 的复杂性。

 

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐