js-cookie基础使用与设置过期时间

积跬步，至千里。

前端web项目开发的过程中，有时候会使用到cookie来存储有时限的token

本文主要介绍在vue项目中，js-cookie插件的基础使用与设置cookie过期时间

一、简介

js-cookie是一个简单的，轻量级的处理cookie相关的插件。

二、环境配置

在前端vue项目中，需要先下载相应的模块并在使用处，导入模块。

//下载模块
npm install js-cookie -S

//在需要使用的文件中导入模块
import Cookies from 'js-cookie'

三、使用

设置cookie

// 创建一个名称为name，值为value的cookie，默认失效时间为该网站关闭时
Cookies.set(name, value);

// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 });

// 创建一个带有路径的cookie
Cookies.set(name, value, { path: '' });

//为当前页创建有效期7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' })

// 创建一个cookie，自定义过期时间（一般过期时间的设置以天为单位，这里可以使用时间戳自定义过期时间，例如过期时间为：半小时）
let time = new Date(new Date().getTime() + 30 * 60 * 1000);
//或
let time = new Date(new Date()*1 + 30 * 60 * 1000);
Cookies.set(name, value, { expires: time });

获取cookie

// 获取指定名称的cookie 
Cookies.get(name); // value

// 获取的cookie不存在
Cookies.get('noName'); //undefined

// 获取所有cookie 
Cookies.get();

删除cookie

// 删除指定名称的cookie 
Cookies.remove(name); // value 

// 删除带有路径的cookie 
//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set(name, value, { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove(name, { path: '' }); // 删除成功

//注意，删除不存在的cookie不会报错也不会有返回

OK，完毕。