位置: IT常识 - 正文

js-cookie的使用(js-cookie vue)

编辑:rootadmin
js-cookie的使用 1、下载js-cookienpm install js-cookie2、引入js-cookieimport Cookies from "js-cookie";3、使用// 写入cookieCookies.set('name', 'value')// 读取Cookies.get('name') // => 'value'Cookies.get('nothing') // => undefined// 读取所有可见的cookieCookies.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,默认是falseCookies.set('key', 'value'); //创建简单的cookieCookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookieCookies.set('key', 'value', { expires: 17, path: '' }); //可以通过配置path,为当前页创建有效期7天的cookie//2、取cookieCookies.get('key'); // 获取指定key 对应的valueCookies.get(); //获取所有value//3、删除cookieCookies.remove('key');//删除普通的cookieCookies.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' } }

推荐整理分享js-cookie的使用(js-cookie vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js-cookie vue,js cookie localstorage,js cookie用法,js cookies,js-cookie vue,js-cookie vue,js cookie用法,js cookie用法,内容如对您有帮助,希望把文章链接给更多的朋友!

需求:在开发的业务中,业务需要在前端进行数据的缓存,到期就删除再进行获取新数据。

前端设置数据定时失效的可以有下面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 天后失效js-cookie的使用(js-cookie vue)

官方文档只要设置天数,没有时分秒,这样我们想设置更小单位的时候无法下手,其实也可以设置时间戳来处理时间的,下面这种方式可以设置任意单位的有效期:

let seconds = 10;let expires = new Date(new Date() * 1 + seconds * 1000);Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效贴上利用js-cookie的二次封装, 记得 npm i js-cookieimport 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.jiuchutong.com/zhishi/300620.html 转载请保留说明!

上一篇:一文看懂Transformer(详解)(一文看懂华为新品发布会)

下一篇:【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz(rust 入门教程)

  • sony耳机防伪码在哪(索尼耳机防伪标签)

    sony耳机防伪码在哪(索尼耳机防伪标签)

  • 计算机excel函数公式(计算机excel函数公式平均分)

    计算机excel函数公式(计算机excel函数公式平均分)

  • 快手看不了图片怎么办(快手看不了图片怎么回事)

    快手看不了图片怎么办(快手看不了图片怎么回事)

  • i7860是几代(酷睿i7860什么年代的处理器)

    i7860是几代(酷睿i7860什么年代的处理器)

  • 微信群扫码200人以后怎么还可以扫(微信群扫码进群200人数限制)

    微信群扫码200人以后怎么还可以扫(微信群扫码进群200人数限制)

  • 抖音蓝V号和黄V号有何区别(抖音认证黄v好还是蓝v号)

    抖音蓝V号和黄V号有何区别(抖音认证黄v好还是蓝v号)

  • cad打印jpg像素设置多少合适(cad打印jpg像素设置多大才好)

    cad打印jpg像素设置多少合适(cad打印jpg像素设置多大才好)

  • ipad10.2英寸是什么型号(ipad10.2英寸是ipad2019吗)

    ipad10.2英寸是什么型号(ipad10.2英寸是ipad2019吗)

  • gt720m相当于什么显卡(gt720m参数)

    gt720m相当于什么显卡(gt720m参数)

  • 网络不给力怎么办(网络不给力怎么检查网络配置)

    网络不给力怎么办(网络不给力怎么检查网络配置)

  • qq被屏蔽了会有提示吗(qq被屏蔽后还能看到对方动态吗)

    qq被屏蔽了会有提示吗(qq被屏蔽后还能看到对方动态吗)

  • mac任务管理器快捷键是什么(mac 任务管理器)

    mac任务管理器快捷键是什么(mac 任务管理器)

  • 充电器有几种接口(充电器的3种接头分别叫什么)

    充电器有几种接口(充电器的3种接头分别叫什么)

  • 微博上下的软件怎么删(微博app内下载的软件)

    微博上下的软件怎么删(微博app内下载的软件)

  • 什么是性能测试(什么是性能测试,其应用领域分别是什么)

    什么是性能测试(什么是性能测试,其应用领域分别是什么)

  • 手机导航键怎么设置(手机导航键怎么调出来)

    手机导航键怎么设置(手机导航键怎么调出来)

  • 爱奇艺怎么设置青春版(爱奇艺怎么设置循环播放视频)

    爱奇艺怎么设置青春版(爱奇艺怎么设置循环播放视频)

  • 苹果手机便捷访问怎么用(苹果手机便捷访问可以用来干嘛)

    苹果手机便捷访问怎么用(苹果手机便捷访问可以用来干嘛)

  • 注册itms失败怎么解决(itms未注册怎么办)

    注册itms失败怎么解决(itms未注册怎么办)

  • 怎么让照片小于200k(怎么让照片小于190k)

    怎么让照片小于200k(怎么让照片小于190k)

  • macair开不了机(macair开不了机怎么办)

    macair开不了机(macair开不了机怎么办)

  • 陌陌停车游戏在哪(陌陌停车游戏在哪里看帖了谁的车)

    陌陌停车游戏在哪(陌陌停车游戏在哪里看帖了谁的车)

  • vivox27pro怎么设置nfc(vivox27pro怎么设置指纹解锁)

    vivox27pro怎么设置nfc(vivox27pro怎么设置指纹解锁)

  • 苹果电脑任务栏还原到下面教程(苹果电脑任务栏跑到左边去了)

    苹果电脑任务栏还原到下面教程(苹果电脑任务栏跑到左边去了)

  • Three.js教程:材质效果(three.js 入门)

    Three.js教程:材质效果(three.js 入门)

  • 公司的资本公积金可以用于弥补公司的亏损
  • 工会活动奖励现金怎么入账
  • 服务业按什么结算工资
  • 固定资产40%部分能抵即征即退项目吗
  • 生产企业内销和出口
  • 应收账款平均数
  • 租赁行业的增值税税率
  • 银行利息税是多少2021
  • 购入技术服务怎么结转成本的
  • 冲销预付账款后该如何做账务处理呢?
  • 闲置资金怎么说?
  • 诉讼管辖分为
  • 预付的账款属于
  • 季度企业所得税可以弥补以前年度亏损吗
  • 水利基金的计税依据是含税收入还是不含税收入
  • 房地产公司的广告语
  • 计提税金和缴纳税金的会计分录
  • 可供出售金融资产属于流动资产吗
  • 员工借款收不回来账务处理
  • 旅游服务费如何入账
  • 增值税及附加税费减免一览表
  • mac更新系统版本
  • Windows10如何切换中英文输入法
  • excel中在多个单原格中输入相同数据
  • mac如何搜索
  • 怎么才能快速?
  • 静默安装命令
  • 买车的收费项目详细清单
  • PHP:curl_multi_select()的用法_cURL函数
  • fp是什么文件
  • thinkphp5 分页
  • 股东分红个人所得税怎么算
  • 集体土地使用权可以抵债吗
  • 坏账准备的借贷方向表示什么意思
  • 个人所得税通过扣缴义务人申报
  • 玩转ChatGPT:中科院ChatGPT Academic项目部署与测评
  • 新版python
  • 哪些农产品属于免税
  • 权益法转成本法非同一控制下为什么不公允
  • 税审报告什么时候需要
  • 员工奖励现金如何做账
  • 帝国cms什么语言
  • 作废发票要不回来了怎么办
  • 限额领料单属于什么凭证
  • 企业可以一次性现金的方式发放工资
  • 增值税专用发票和普通发票的区别
  • sql语句修改某个字段
  • 主营业务收入和销售费用的区别
  • 监理公司成本核算方法
  • 不动产租赁可以享受加计抵减吗
  • 主营业务成本包括哪些
  • 外购货物用于促销的账务处理
  • 运费少给怎么办
  • 应收账款和预收账款都是企业的债权
  • 研发阶段的产品质检要参与
  • 资产减值损失是负的意味着什么
  • 出售辅助材料怎么做账
  • 加计扣除10%进项税政策文件
  • 申报和做账必须一致吗
  • 利润分配未分配利润怎么结转
  • 工业企业待摊费用标准
  • mysql千万级分页优化
  • windows 10预览版
  • Win7怎么关闭自动更新
  • win1020h2版本千万别更新
  • windowsxp 32位
  • 一个简单的小实验
  • 电脑自动重启命令
  • Python统计代码
  • nodejs 模块
  • JS+CSS实现仿雅虎另类滑动门切换效果
  • node.js+captchapng+jsonwebtoken实现登录验证示例
  • unity 角色
  • javascript初级教程
  • android内存占用分析
  • javascript面向对象精要pdf下载
  • super函数python
  • 跨区域报验和预审的区别
  • 换电员工作时间自由吗
  • 在本地买车怎么上外地牌照
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设