全面的前端编程教程 - 秘密武器开发者中心

热搜:m1 代理 前端 301

js-cookie的使用

2024-01-02 09:30:01

js-cookie 是一个简单、轻量级的JavaScript API,用于处理cookie。如果您希望使用 js-cookie 来设置带有过期时间的token,您可以按照以下步骤进行:

首先确保您的项目中已经包含了 js-cookie 库。如果尚未添加,可以通过npm或者直接在HTML中包含它的CDN链接来添加。

通过npm安装:

npm install js-cookie

然后在您的JavaScript文件中引入:

import Cookies from 'js-cookie';

或者,如果您不是在使用module bundler的情况下,在您的HTML文件中通过CDN引入:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3/dist/js.cookie.min.js"></script>

创建一个通用函数来设置带有过期时间的token:

import Cookies from "js-cookie";
/**
* 设置带有过期时间的token
* @param {string} token - 要设置的token字符串
* @param {number} expireDays - token到期的天数
*/
function setToken(token, expireDays) {  Cookies.set('token', token, { expires: expireDays });
}
/**
* 获取存储的token
*/
function getToken() {  return Cookies.get('token');
}
/**
* 删除存储的token
*/
function removeToken() {  Cookies.remove('token');
}

在上面的代码中,setToken 函数接受一个token字符串和过期时间(天数)。使用 Cookies.set 方法设置cookie,其中 'token' 是cookie名,expireDays 是一个数字,代表cookie将在多少天后过期。getToken 方法是用来获取存储的token,而 removeToken 方法用于删除token。

示例用法:

// 设置一个名为'token'的cookie,7天后过期
setToken('your-secure-token', 7);
// 读取cookie中的token
var token = getToken();
console.log(token);
// 移除cookie中的token
removeToken();

请记住,cookie存在安全限制,例如,如果您正在使用的是安全或HTTPS页面,需要设置 secure 选项,同时最好还要设置 SameSite 属性以提高安全性。

Cookies.set('token', token, {  
     expires: expireDays,  
     secure: true,      // 只有在 https 连接时才发送cookie
     sameSite: 'strict' // 严格的同站点策略,以减少CSRF风险
 });

确保在实际的生产环境中,根据您的具体需要来调整安全设置。


js