cookie的使用和封装

当前文章主要总结cookie的使用方法,后续陆续补充

  • 设置cookie
// 1、设置的cookie不带有效期,则关闭浏览器时cookie被清除
document.cookie = 'name=Licy'

// 2、设置的cookie带有效期,即:在有效期内,即使关闭了浏览器当前的cookie还是存在的
let data = new Date().getTime()   //时间转化为毫秒
let newData = new Date(data + 7*24*60*60*1000)  //将过期时间设置为7天后
document.cookie = 'name=Licy;' + 'expires=' + newData.toUTCString()  // toUTCString() 根据世界时 (UTC) 把 Date 对象转换为字符串

以上,cookie不能批量设置,只能一条一条的使用 document.cookie 来设置

  • 查看cookie
// 1、查看所有cookie
document.cookie

// 2、查看某个key=name的cookie
let re = new RegExp("\s?" + "name" + "=([^;]+)(;|$)")
document.cookie.match(re)[1]

以上,可以通过console.log()在控制台上打印查看

  • 删除cookie
    删除,并没有一个直接的delete方法直接删除,而是设置一个比当前时间早的一个时间让cookie失效,这样就起到了一个删除的作用
let currentTime = new Date().getTime()   //时间转化为毫秒
let setTime = new Date(currentTime - 24*60*60*1000) //将过期时间设为一天前
document.cookie = 'name=Licy;' + 'expires=' + setTime.toUTCString()

以上,我们在项目中使用的时候需要封装一个对cookie增、删、改、查的方法
(网上一大堆,可以随便百度一个自己觉得比较好的)

以下是封装库函数cookie.js的完整内容

//设置- cookie
function setCookies(obj, expireDate) {
  let  expireTime= new Date( new Date().getTime() + expireDate*24*60*60*1000 ).toUTCString()
  // 批量塞cookie
  for(let i in obj) {
      document.cookie = i + '=' + obj[i] + ';expires=' + expireTime
  }
}

// 查看- cookie
function getCookie(key) {
  let re = new RegExp("\s?" + key + "=([^;]+)(;|$)")
  return document.cookie.match(re)[1]
}

// 删除- cookie
function removeCookies(keys) {
  let expireTime = new Date(new Date().getTime() - 24*60*60*1000).toUTCString()
  for(let i in keys) {
      document.cookie = keys[i] + '= ;' + 'expires=' + expireTime
  }
}

// case
setCookies({ name: 'Licy', age: 29, sex: '女' }, 7)

getCookie('name')

removeCookies(['name', 'sex'])
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值