js之cookie操作

//今天上午学习的时候突然发现自己把cookie的操作忘了,所以来回顾一下这个

一、cookie是什么

  • cookie 是一个存放在客户端的存储空间(可以以字符串形式存放)

二、cookie的特点

  1. 按照域名存储

  2. 存储大小有限制( 4KB左右)

  3. 时效性(默认为浏览器关闭就清楚,可以自己设置)

  4. 请求头自动携带cookie数据(如果有就携带)

  5. 前后端操作

三、操作cookie

  • 增加一条cookie => document.cookie = ‘key=value’;
    //因为cookie中key唯一,所以修改只要key一样,重新给value即可

  • 设置cookie的时效时间

	 // 获取当前时间
        let now = new Date();
        // 将当前时间推迟7天
        now.setTime( now.getTime()+(7*24*3600*1000) );
        // 重新设置cookie
        document.cookie = "name=vanC;expires="+now;

四、cookie的封装

//因为我们读写cookie的时候最多要三个参数,所以封装的时候参数也是三个

//添加cookie的封装

function setCookie(key, value, expires) {
      // expires 可以不传递, 不传递的时候默认使用 session

      // 1. 判断你有没有传递 expires
      //    如果传递了就是一个数字, 没有传递就是 undefined
      if (expires) {
        // 如果这里执行了, 表示你的 expires 传递的是一个数字
        var time = new Date()
        time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)
        document.cookie = key + '=' + value + ';expires=' + time
      } else {
        // 没传递直接设置就可以了
        document.cookie = key + '=' + value
      }
    }

//读取的封装

   function getCookie(key) {
      // key 接受的就是你想要 读取cookie 空间中给的哪一个属性的值
      // 1. 准备一个 str
      var str = ''

      // 2. 去到 document.cookie 中找到 ‘a’ 对应的值赋值给 str

      // 因为cookie读取时是一个字符串,不好从字符串里面找到对应的内容
      // 使用 split 切割一下这个 document.cookie
       var tmp = document.cookie.split('; ')
      // 循环遍历
      for (var i = 0; i < tmp.length; i++) {
        // = 前面就是 每一条 cookie 的 key
        // = 后面就是 每一条 cookie 的 value
        // 我们就把这个 tmp[i] 再次按照 = 切割
        var t = tmp[i].split('=')
        // t[0] 就是每一条 cookie 的 key
        // t[1] 就是每一条 cookie 的 value
        // 如果 t[0] 和我传递进来的那个参数一样
        // 当前 t[1] 就是我需要 对应的值
        if (t[0] === key) {
          str = t[1]
        }
      }


      // 3. 把赋值好的 str 返回出去
      return str
    }

//最近在学习node服务器和框架,思绪有点乱,等过两天学完了,整理好思绪再写!!!

最后一句:好好学习,天天向上。中国加油,武汉加油,千峰加油!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值