cookie操作与封装

JavaScript中cookie的操作与封装

一、了解cookie

• cookie是一个在客户端的存储空间，在浏览器里。可以将一些信息存储在客户端中。
• 以字符串的形式存储一些数据
  1. 数据格式必须是 key=value
  2. 多条数据中间用分号;间隔
  3. 每一个cookie都有一个过期事件expires，到达设置时间后关闭浏览器

二、cookie的特点

• 按照域名存储，你在哪一个域名下存储的内容, 就在哪一个域名下使用，其他域名都用不了，和资源路径地址没有关系。
• 存储大小有限制,4KB或者50条cookie。
• 时效性，默认是会话级别的时效性(关闭浏览器就没有了)， 可以手动设置, 七天后, 两个小时以后。
• 请求自动携带
  • 当你的 cookie 空间里面有内容的时候， 只要是当前域名下的任意一个请求, 都会自动携带 cookie 放在请求头里面，cookie 里面有多少自动携带多少，如果 cookie 空间中没有内容, 就不会携带了。
• 前后端操作
  • 前端可以通过 js 操作 cookie 空间进行增删改查。
  • 后端也可以通过任何后端语言进行 cookie 空间的增删改查。

三、cookie的操作

• 在chrome浏览器中，cookie的设置需要打开服务器设置，我用的时phpstudy服务器，本地路径打开无法设置cookie。
• 
• 

设置cookie

• document.cookie = 'key=value'
• 一次只能设置一条cookie，如果想设置多条cookie，需要多次执行代码
• 想要更改某条cookie值，就设置相同的key值，不一样的value
• 当你不进行额外设置的时候, 你设置的 cookie 默认就是会话级别(关闭浏览器就没有了)
• 想要给cookie设置一个过期时间
  • 语法:document.cookie = 'a=100;expires=时间对象'
  • cookie使用的是世界标准时间，而我们使用的new Date()则是我们自己的时间，也就是中国所在时区的时间，+8时区
    我们需要减去这8个小时在设置cookie时间，才是我们正确设置的时间。

1. 设置两条 cookie

// 设置两条 cookie
     document.cookie = 'a=100'
   	 document.cookie = 'b=200'

2. 设置15秒后过期的cookie

  // 设置一个有过期时间的 cookie
    document.cookie = 'a=100'


    // new Date() 就是当前时间的时间对象
    document.cookie = 'b=200;expires=' + new Date()


    // 一个合适的时间
    var time = new Date() // 当前时间
    // time.getTime() // 时间戳
    // time.getTime() - 1000 * 60 * 60 * 8 // 八个小时以前的时间戳

    // 把这个时间戳再从新设置会 time 时间对象上
    time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 15) // 当前时间的 15 秒以后
    // 此时 time 就是当前时间 8 个小时以前的时间对象
    // 设置 cookie 的时候就使用这个 八个小时 以前的 时间对象
    // console.log(time)

    // time 就是 15 秒以后的时间
    document.cookie = 'c=300;expires=' + time

    // 语法: document.cookie = 'a=100;expires=时间对象'

删除cookie

• 把cookie的过期时间设置成当前时间之前，也就是不存在，就意味着删除

<!-- 点击之后删除cookie -->
<button>删除 cookie</button>

  <script>
    document.cookie = 'a=100' // 默认会话级别  关闭浏览器才会消失

    var but = document.querySelector('button')

    btn.onclick = function () {
      var time = new Date()
      //先减去+8时区的时间  得到cookie使用的时间   在设置一秒前让cookie消失
      time.setTime(time.getTime() - 1000 * 60 * 60 * 8 - 1000)
      document.cookie = 'a=100;expires=' + time 
    }

    /*
      打开页面的时候设置一个会话级别的 cookie
      当我点击 按钮的时候就删除这个 cookie
    */
  </script>

修改cookie

• 修改cookie就是再设置一条key值相同的cookie

 <button>修改 cookie</button>

  <script>
    /*
      修改 cookie
        + 因为 cookie 的存储不允许同名
        + 所以你第二次设置同一条 cookie 的时候就是修改
    */

    document.cookie = 'a=100'

    var btn = document.querySelector('button')
    btn.onclick = function () {
      // 再次设置一遍 a 这个 cookie 就是修改
      document.cookie = 'a=200'
    }

    /*
      打开页面的时候设置了一个 a = 100 的 cookie
      当我点击按钮的时候从西你设置 cookie 的值变为    a = 200
    */
  </script>

获得cookie

//直接打印
console.log(document.cookie)

• 这里的cookie值是一个字符串，需要注意的是，每一条cookie后面都有;加上一个空格

四、cookie操作的简单封装

设置cookie

function setCookie(key, value, expires) {
  // key 就是你要设置的 cookie 的属性名
  // value 就是你要设置的 cookie 的属性值
  // expires 就是你要设置的 cookie 的过期时间


  // 先判断以下你有没有传递 expires   也就是是否设置过期时间
  if (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
  }
}

获取某一条cookie

function getCookie(key) {
  // key 就是你要获取的那一条 cookie 的属性名

  // 1. 准备一个 str
  var str = ''

  // 2. 去到 document.cookie 里面找到对应的 key 的 value 赋值给 str
  // console.log(document.cookie) // 不好直接操作
  // 使用 split 方法切割以下
  var tmp = document.cookie.split('; ')
  // 循环遍历 tmp
  tmp.forEach(function (item) {
    // item 就是每一条 cookie
    // console.log(item)
    // item = 前面的就是每一条 cookie 的 key
    // item = 后面的就是每一条 cookie 的 value
    // 使用 split 方法把 item 切割
    var t = item.split('=')
    // console.log(t)
    // t[0] 就是每一条 cookie 的 key
    // t[1] 就是每一条 cookie 的 value
    // 判断
    if (t[0] === key) {
      str = t[1]
    }
  })

  // 3. 把 str 返回
  return str
}

更改与删除cookie值，就是再设置一遍cookie或者让cookie的时间为负数。

也可以更近一步的再对更改，删除cookie操作进行封装。这里就不作赘述