js-cookie的使用

这篇具有很好参考价值的文章主要介绍了js-cookie的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、下载js-cookie

npm install js-cookie

2、引入js-cookie

import Cookies from "js-cookie";

3、使用

// 写入cookie
Cookies.set('name', 'value')
// 读取
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
// 读取所有可见的cookie
Cookies.get()
// 删除某项cookie值
Cookies.remove('name')

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

import Cookies from 'js-cookie'

5、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
Cookies.get('key'); // 获取指定key 对应的value
Cookies.get(); //获取所有value

//3、删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie
注意:如果存的是对象,如: userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)

取出来的userInfo需要进行JSON的解析,解析为对象:let res = JSON.parse( Cookie.get('userInfo') );

当然你也可以使用:Cookie.getJSON('userInfo');
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }
//-------------------------------------------------------//
Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { 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 = window.localStorage.getItem(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) {
 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)
}

域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://www.toymoban.com/news/detail-415251.html

到了这里,关于js-cookie的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(52)
  • 解决引入spire.doc.free-3.9.0.jar导致spring boot项目无法使用maven的install问题

    问题背景: 在一个项目中需求中需要导出一个word模板,那之前有做过一个这个类似需求,这次使用的是freemarker模版。在引入spire.doc.free-3.9.0.jar依赖的时候发现maven依赖报红色,悬浮提示aliyun找不到改包,没有太在意这个部分,本地能够正常使用。本地仓库存在这个jar包,并

    2024年02月15日
    浏览(50)
  • Cannot use import statement outside a module 单测import引入模块失败

    运行npx jest时报错:Test suite failed to run 或者Cannot use import statement outside a module解决方法如下: 在package.json中设置 \\\"type\\\": \\\"module\\\" 如果没有package.json,终端使用 npm init -y 生成 使用babel转换es6语法 jest是运行在node环境的,所以不支持es6语法,我们需要通过配置babel将es6语法转换为

    2024年02月11日
    浏览(39)
  • Vue项目 css下载字体并引入使用

    1.下载字体         下载字体: 字体下载,字体大全,免费字体下载,在线字体|字客网 字客网是全球知名的字体下载与分享网站,齐全的中文,日文,韩文,英文,图标,美术设计,毛笔,钢笔,手写,书法字体大全,提供找字体,字体识别,字体下载,在线字体预览,字体转换,字体设计等服务

    2024年01月16日
    浏览(33)
  • babel-plugin-import 实现按需引入

     官方文档:https://github.com/umijs/babel-plugin-import#usage 组件库按需加载原理分析 - 掘金 组件库按需加载:  组件库以组件为基本单位产出 js、css、less 文件,借助插件或者部分引入的写法,使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。    webpack

    2023年04月26日
    浏览(24)
  • Flutter 引入包import的各种含义,及常用命名规范

    import \\\'dart:xxx\\\'; 引入Dart标准库 import \\\'xxx/xxx.dart\\\'; 引入相对路径的Dart文件 import \\\'package:xxx/xxx.dart\\\'; 引入Pub仓库pub.dev(或者pub.flutter-io.cn)中的第三方库 import \\\'package:project/xxx/xxx.dart\\\'; 引入自定义的dart文件 import \\\'xxx\\\' show compute1, compute2 只导入compute1,compute2 import \\\'xxx\\\' hide compute3 除了

    2024年02月12日
    浏览(62)
  • vue路由中component的动态引入(import、require的各种写法)

    常用import写法(如下图): 常用写发,先用import通过路径引入组件对象,再赋给component。 稍微高级一点 直接“@”到目标主文件夹,不用敲那么多点点点。 来源转化:

    2024年02月06日
    浏览(51)
  • 【前端】Vue中引入excel模板并下载以及XLSX使用

    模板存放位置 src/assets/excelTemplate/模板.xls 安装模块包 新增配置,在vue.config.js中,自己比较一下,最后一段新增的chainWebpack 即可将模板下载到本地 我使用XLSX的场景,在我上传excel的时候,我需要获取它的表头以及里面的数据进行渲染到表格中,在我编辑的时候需要请求Exce

    2024年02月21日
    浏览(46)
  • 开发经验分享之:import引入包和@Autowired注入类有什么区别

    大家好,我是三叔,很高兴这期又和大家见面了,一个奋斗在互联网的打工人。 import 和 @Autowired 想必大家在 Java 开发中使用频率最多的之一了把,这篇博客将解释这两个概念的区别和作用,帮助你更好地理解它们在Java开发中的应用。 import引入包 在 Java 中,import 关键

    2024年02月14日
    浏览(41)
  • macos pip3 install pycryptodome导入from Crypto.Cipher import AES报错

    问题:         已经使用pip3 install pycryptodome安装成功了,但是导入from Crypto.Cipher import AES还是提示Unresolved reference \\\'Crypto\\\' 原因:         一句话:安装文件大小写问题(这只是我遇到的一种情况)。 修改:         先使用命令: pip3 show pycryptodome,查看安装包的位置

    2024年01月24日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包