js-cookie的使用

1、下载js-cookie

1. npm install js-cookie

复制代码

2、引入js-cookie

1. import Cookies from "js-cookie";

复制代码

3、使用

1. // 写入cookie
2. Cookies.set('name', 'value')
3. // 读取
4. Cookies.get('name') // => 'value'
5. Cookies.get('nothing') // => undefined
6. // 读取所有可见的cookie
7. Cookies.get()
8. // 删除某项cookie值
9. Cookies.remove('name')

复制代码

4、cookie在全局使用（方法二）在main.js中引入

1. import Cookies from 'js-cookie'

复制代码

5、cookie设置逾期时间

1. //1、存cookie  set方法支持的属性有 ：  expires->过期时间    path->设置为指定页面创建cookie   domain-》设置对指定域名及指定域名的子域名可见  secure->值有false和true ,表示设置是否只支持https,默认是false
2. Cookies.set('key', 'value');  //创建简单的cookie
3. Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
4. Cookies.set('key', 'value', { expires: 17, path: ''  }); //可以通过配置path,为当前页创建有效期7天的cookie
6. //2、取cookie
7. Cookies.get('key'); // 获取指定key 对应的value
8. Cookies.get(); //获取所有value
10. //3、删除cookie
11. Cookies.remove('key');//删除普通的cookie
12. Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie

复制代码

1. 注意：如果存的是对象，如： userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)
3. 取出来的userInfo需要进行JSON的解析,解析为对象：let res = JSON.parse( Cookie.get('userInfo') );
5. 当然你也可以使用：Cookie.getJSON('userInfo');

复制代码

1. Cookies.get('name'); // => '{"foo":"bar"}'
2. Cookies.get(); // => { name: '{"foo":"bar"}' }
3. //-------------------------------------------------------//
4. Cookies.getJSON('name'); // => { foo: 'bar' }
5. Cookies.getJSON(); // => { name: { foo: 'bar' } }

复制代码

需求：在开辟的业务中，业务需要在前端举行数据的缓存，到期就删除再举行获取新数据。
前端设置数据定时失效的可以有下面2种方法：
1、当数据较大时，可以使用localstorage，存数据时间写入一个时间，获取的时间再与当前时间举行比力
2、如果数据不凌驾cookie的限定巨细，可以使用cookie比力方便，直接设置有用期即可。

使用localstorage实现：步调

1.存储数据时加上时间戳
在项目开辟中，我们可以写一个公用的方法来举行存储的时间加上时间戳

1. //export抛出
2. export function setLocalStorageAndTime (key, value) {
3. window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
4. }

复制代码

项目中
存储

1. // 有数据再进行存储
2.   setLocalStorageAndTime('XXX', {name: 'XXX'})

复制代码

读取

1. // 判断是否返回为null或者失效
2. getLocalStorageAndTime('XXX', 86400000)

复制代码

获取数据时与当前时间举行比力

1. export function getLocalStorageAndTime (key, exp = 86400000) {
2. // 获取数据
3. let data = window.localStorage.getItem(key)
4. if (!data) return null
5. let dataObj = JSON.parse(data)
6. // 与过期时间比较
7. if (new Date().getTime() - dataObj.time > exp) {
8.   // 过期删除返回null
9.   removeLocalStorage(key)
10.   console.log('信息已过期')
11.   return null
12. } else {
13.   return dataObj.data
14. }
15. }

复制代码

使用cookie实现

js-cookie 的示例中只有以天为单位的有用期：

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

复制代码

官方文档只要设置天数，没偶然分秒，如许我们想设置更小单位的时间无法动手，着实也可以设置时间戳来处理时间的，下面这种方式可以设置任意单位的有用期：

1. let seconds = 10;
2. let expires = new Date(new Date() * 1 + seconds * 1000);
3. Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效

复制代码

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

1. import Cookies from 'js-cookie'
3. /*
4. * 设置cookies
5. * */
6. export function getCookies (key) {
7. return Cookies.get(key)
8. }
9. /*
10. * 设置Cookies
11. * */
12. export function setCookies (key, value, expiresTime) {
13. let seconds = expiresTime
14. let expires = new Date(new Date() * 1 + seconds * 1000)
15. return Cookies.set(key, value, { expires: expires })
16. }
17. /*
18. * 移除Cookies
19. * */
20. export function removeCookies (key) {
21. return Cookies.remove(key)
22. }

复制代码

域domain与路径path
默认值：
path: ‘/’

domain表示的是cookie地点的域，默以为哀求的地点，如网址为www.jb51.net/test/test.aspx，那么domain默以为www.jb51.net。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。
path表示cookie地点的目录，asp.net默以为/，就是根目录。在同一个服务器上有目录如下：/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：一个数字，表示自Date.now()到期起的毫秒数
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标头中过滤掉。

来源：https://blog.csdn.net/weixin_52615140/article/details/128543259
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！