JavaScript Cookie

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

一。什么是cookie

cookie就是浏览器暂时存储一些数据，在电脑本地上

cookie要在服务器环境下设置才可以

cookie 以各个站点为单位储存的，不同浏览器之间不可以共用

1.创建和修改cookie

      <script>
    //设置和修改cookie
    document.cookie = "username=李四"
    document.cookie = "sex=男"
    document.cookie = "username=张三"
     </script>
      

控制台打印刻可以看出来以字符串形式输出

      <script>
    //设置和修改cookie
    document.cookie = "username=李四"
    document.cookie = "sex=男"
    document.cookie = "username=张三"
    console.log(document.cookie)
</script>

2.删除cookie

    toUTCString()方法把一个日期转化成一个字符串，使用UTC时间
    删除cookie 需要设置一个过期的时间
    需要对 expires 设置，  他是一个日期对象的字符串(国际标准时间)
     
     expires的值，如果是过期时间则是删除，如果是未来时间，则表示的是数据保存的时间
    
    let date=new Date("2022-6-7")
  document.cookie="sex=男;expires="+date.toUTCString()

因为UTC时间和北京时间相差8小时，所以设置的北京时间是6.7号，但显示的UTC时间为6。6号下午16：00点

3。单数取出cookie的值

      document.cookie = "username=张三"
document.cookie = "age=13"

let arr = document.cookie.split(";")
console.log(arr)
let obj = {}
arr.forEach(key => {
  let a = key.split("=")
  obj[a[0]] = a[1]
})
console.log(obj["username"])
console.log(obj[" age"])

封装cookie函数

     let $cookies = {
  // 保存
  addCookie(key, val, days) {
    let date = new Date()
    //获取当前时间
    // setDate()方法，根据本地时间来指定一个日期对象的天数
    // getDate()方法，回一个指定日期对象为一个月中某一天，值为1-31中的整数
    date.setDate(date.getDate()+days)
    document.cookie = `${key}=${val};expires=` + date.toUTCString()
  },
  // 获取
  getCookies(key) {
    let obj = {}
    document.cookie.split(";").forEach(keys => {
      let arr = keys.split("=")
      obj[arr[0]] = arr[1]

    })
    return obj[ket]
  },
  removeCookie(key) {
    $cookies.addCookie(key, "", -1)
  }
}
$cookies.addCookie("name","李四",7)