Cookie的使用（js-cookie插件） - 简书

使用vue-cookies操作cookie - 简书

【Cookie】js-cookie插件的使用：_npm cookie-js-CSDN博客

一、安装

npm install js-cookie --save

二、引用

import Cookies from 'js-cookie'

三、一般使用

1. 存到Cookie去

// Create a cookie, valid across the entire site:
Cookies.set('name', 'value');

// 创建一个从现在起7天内过期的cookie，在整个站点有效:
Cookies.set('name', 'value', { expires: 7 });

// Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });

//           name       value
Cookies.set('TokenKey', token, { expires: 1000, path: '/', domain: 'xx.com' });


//不写过期时间，默认为1天过期
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")

this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60秒后过去

this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30分钟后过去

2.在Cookie中取出

// Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

// Read all visible cookies:
Cookies.get(); // => { name: 'value' }

3.删除

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

// Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

// 删除带有路径的cookie
Cookies.set('name', value, { path: '' })
Cookies.remove('name', { path: '' })

Cookies.remove('name', { path: '', domain: '' }); // removed!

// 如果cookie是在特定的域（domain）下设置的，你也需要指定相同的域去清除它
Cookies.remove('user', { domain: 'example.com' });

有子域名下都可以访问，实现跨站点通信
Cookies.set("token", v, { domain: '.yuandaxia.com' });

注意：通过domain设置的cookie清除的时候也必须使用domain清除
Cookies.remove("token", { domain: '.yuandaxia.com' });

第五个：domain,cookie有效的域名，
如果domain,设置为googlephp.cn，那么在googlephp.cn下的所有子域都有效。假设googlephp.cn有两个子域，php.googlephp.cn，css.googlephp.cn，我们设置为 setcookie(“user”,”php”,time()+3600,”/”,”php.googlephp.cn”),那么只有在 php.googlephp.cn这个子域下才能获取user这个cookie变量的值. 再举一个例子：setcookie(“user”,”php”,time()+3600,”/test”,”php.googlephp.cn”),那么只有在php.googlephp.cn这个子域下的test目录下才能获取user这个cookie变量的值.
例如设成".hanj.com"则在.hanj.com下的所有服务器下的文件都可以调用cookie，在hanj的所有子域名下都可以访问，实现跨站点通信
Cookies.set("token", v, { domain: '.yuandaxia.com' });

注意：通过domain设置的cookie清除的时候也必须使用domain清除
Cookies.remove("token", { domain: '.yuandaxia.com' });
项目↓
Cookies.remove("satoken", { path: "/", domain: ".yuandaxia.com" }); // removed!

四、特殊使用（在Cookie中存对象）

跟一般使用不同的是，从Cookie中取出的时候，要从字符串转换成json格式：

const user = {
  name: 'lia',
  age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))

贴上利用js-cookie的二次封装, 记得 npm i js-cookie

import Cookies from 'js-cookie'
 
/*
* 设置cookies
* */
export function getCookies (key) {
 return Cookies.get(key)
}
/*
* 设置Cookies
* */
export function setCookies (key, value, expiresTime) {
 let seconds = expiresTime
 let expires = new Date(new Date() * 1 + seconds * 1000)
 return Cookies.set(key, value, { expires: expires })
}
/*
* 移除Cookies
* */
export function removeCookies (key) {
 return Cookies.remove(key)
}