js-cookie⽤法详解
安装：
//以下⼏种都可以⽤：
1、引⼊js-cookie.js
1.直接饮⽤cdn：<script src="cdn.jsdelivr/npm/js-cookie@2/kie.min.js"></script>
2.本地下载下来后：<script src="/path/kie.js"></script>
3.模块化开发时: import Cookies from 'js-cookie'
⼀、下载cookie
npm install js-cookie
⼆、当前页⾯引⽤cookie
import Cookies from "js-cookie";
三、cookie在当前的使⽤(⽅法⼀)
// 组件中使⽤
// 写⼊cookie
Cookies.set('name', 'value')
// 读取
<('name') // => 'value'
<('nothing') // => undefined
// 读取所有可见的cookie
<()
// 删除某项cookie值
四、cookie在全局使⽤（⽅法⼆）
main.js
import Cookies from 'js-cookie'
五、cookie设置过期时间
//1、存cookie set⽅法⽀持的属性有： expires->过期时间 path->设置为指定页⾯创建cookie domain-》设置对指定域名及指定域名的⼦域名可见 secure->值有false和true ，表⽰设置是否只⽀持https，默认是false Cookies.set('key', 'value'); //创建简单的cookie
Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 17, path: '' }); //可以通过配置path，为当前页创建有效期7天的cookie
//2、取cookie
<('key'); // 获取指定key 对应的value
<(); //获取所有value
如何下载javascript//3、删除cookie
注意：如果存的是对象，如： userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo)
取出来的userInfo需要进⾏JSON的解析，解析为对象：let res = JSON.parse( ('userInfo') );
当然你也可以使⽤：JSON('userInfo');
<('name'); // => '{"foo":"bar"}'
<(); // => { name: '{"foo":"bar"}' }
//-------------------------------------------------------//
举例⼆：
背景：业务需要在前端进⾏数据的缓存，到期就删除再进⾏获取新数据。
前端设置数据定时失效的可以有下⾯2种⽅法：
1、当数据较⼤时，可以利⽤localstorage，存数据时候写⼊⼀个时间，获取的时候再与当前时间进⾏⽐较
2、如果数据不超过cookie的限制⼤⼩，可以利⽤cookie⽐较⽅便，直接设置有效期即可。
/--------------------------------------------------------------------------------------/
利⽤localstorage实现：步骤
1.存储数据时加上时间戳
在项⽬开发中，我们可以写⼀个公⽤的⽅法来进⾏存储的时候加上时间戳
//export抛出
export function setLocalStorageAndTime (key, value) {
window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}
项⽬中：
存储、
// 有数据再进⾏存储
setLocalStorageAndTime('XXX', {name: 'XXX'})
读取、
// 判断是否返回为null或者失效
getLocalStorageAndTime('XXX', 86400000)
获取数据时与当前时间进⾏⽐较、
export function getLocalStorageAndTime (key, exp = 86400000) {
// 获取数据
let data = Item(key)
if (!data) return null
let dataObj = JSON.parse(data)
// 与过期时间⽐较
if (new Date().getTime() - dataObj.time > exp) {
// 过期删除返回null
removeLocalStorage(key)
console.log('信息已过期')
return null
} else {
return dataObj.data
}
}
//----------------------------------------------------------------------------------------/
利⽤cookie实现
js-cookie 的⽰例中只有以天为单位的有效期：
Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效
官⽅⽂档只要设置天数，没有时分秒，这样我们想设置更⼩单位的时候⽆法下⼿，其实也可以设置时间戳来处理时间的，下⾯这种⽅式可以设置任意单位的有效期：
let seconds = 10;
let expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效
贴上利⽤js-cookie的封装, 记得 npm i js-cookie
import Cookies from 'js-cookie'
/*
* 设置cookies
* */
export function getCookies (key) {
(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) {
ve(key)
}
域domain与路径path
默认值：
path: ‘/’
前⾔：
domain表⽰的是cookie所在的域，默认为请求的地址，如⽹址为www.jb51/test/test.aspx，那么domain默认为www.jb51。⽽跨域访问，如域A为t1.test，域B为
path表⽰cookie所在的⽬录，asp默认为/，就是根⽬录。在同⼀个服务器上有⽬录如下：/test/,/test/cd/,/test/dd/，现设⼀个cookie1的path为/test/，cookie2的path
为/test/cd/，那么test下的所有页⾯都可以访问到cookie1，⽽/test/和/test/dd/的⼦页⾯不能访问cookie2。这是因为cookie能让其path路径下的页⾯访问。
cookie.set()更多参数
语法：
cookies.set（名称，[值]，[options]）
更多options的参数配置：
maxAge：⼀个数字，表⽰⾃w()到期起的毫秒数
expires：⼀个Date对象，指⽰cookie的过期⽇期（默认在会话结束时过期）。默认：天
path：⼀个字符串，指⽰cookie的路径（/默认情况下）。
domain：⼀个字符串，指⽰cookie的域（⽆默认值）。
secure：⼀个布尔值，指⽰cookie是否仅通过HTTPS发送（false默认情况下，对于HTTP，true默认情况下，对于HTTPS）。在下⾯阅读有关此选项的更多信息。httpOnly：⼀个布尔值，指⽰cookie是否
仅通过HTTP（S）发送，并且不提供给客户端JavaScript（true默认情况下）。
sameSite：布尔值或字符串，指⽰cookie是“相同站点” cookie（false默认情况下）。可以将其设置为’strict’，‘lax’或true（映射到’strict’）。
signed：⼀个布尔值，指⽰是否要对cookie进⾏签名（false默认情况下）。如果为真，.sig则还将发送另⼀个具有后缀的同名Cookie，其27字节的url安全base64 SHA1值表⽰针对第⼀个Keygrip密钥的cookie-name = cookie-value的哈希值。此签名密钥⽤于检测下次接收cookie时的篡改。
overwrite：⼀个布尔值，指⽰是否覆盖以前设置的同名Cookie（false默认情况下）。如果是这样，则在设置此Cookie时，将从相同名称的同⼀个请求中设置的所有
Cookie（⽆论路径或域如何）都从Set-Cookie标头中过滤掉。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论