[web教学] js-cookie的使用

[复制链接]
查看839 | 回复0 | 2023-8-23 12:08:28 | 显示全部楼层 |阅读模式 来自 中国北京
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
  5. //2、取cookie
  6. Cookies.get('key'); // 获取指定key 对应的value
  7. Cookies.get(); //获取所有value
  8. //3、删除cookie
  9. Cookies.remove('key');//删除普通的cookie
  10. Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie
复制代码
  1. 注意:如果存的是对象,如: userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)
  2. 取出来的userInfo需要进行JSON的解析,解析为对象:let res = JSON.parse( Cookie.get('userInfo') );
  3. 当然你也可以使用: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'
  2. /*
  3. * 设置cookies
  4. * */
  5. export function getCookies (key) {
  6. return Cookies.get(key)
  7. }
  8. /*
  9. * 设置Cookies
  10. * */
  11. export function setCookies (key, value, expiresTime) {
  12. let seconds = expiresTime
  13. let expires = new Date(new Date() * 1 + seconds * 1000)
  14. return Cookies.set(key, value, { expires: expires })
  15. }
  16. /*
  17. * 移除Cookies
  18. * */
  19. export function removeCookies (key) {
  20. return Cookies.remove(key)
  21. }
复制代码
域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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则