Operation with cookie package

JavaScript and packaging operations in the cookie

First, understand the cookie

• cookieIs a storage space on the client, in a browser. It can end some of the information stored in the client.
• Some data is stored as a string of
  1. Data format must be key=value
  2. A plurality of intermediate data by semicolons ;interval
  3. Each cookie has an expiration event expires, set the arrival time after you close your browser

Two, cookie features

• According to 域名storage, you, in which content is stored under a domain name under which a domain name, the domain name will not take the other, and resource path address does not matter.
• Storage size is limited, 4KB or 50 cookie.
• Timeliness, timeliness is the default session-level (the browser is closed, there is no), can be set manually, after seven days, two hours.
• Request automatic carry
  • When your cookie space inside the content, as long as any of the current domain name under a request, the request will automatically carry on the head inside the cookie, cookie inside the number of how many carrying automatic, if the cookie is a space in the content, they will not carry a.
• Operation front and rear ends
  • Js additions and deletions by the front end may operate to change search space cookie.
  • Backend can also add, delete cookie space by any backend language change search.

Three, cookie operations

• In the chrome browser, cookie settings need to open the server settings, when phpstudy server I use, open the local path can not be set cookie.
• 
• 

Set cookie

• document.cookie = 'key=value'
• You can only set one cookie, if you want to set multiple cookie, need多次执行代码
• Want to change a strip cookievalue, set the same keyvalue, not the samevalue
• When you do not perform additional settings, cookie you set the default is会话级别(关闭浏览器就没有了)
• Want to set a cookie expiration time
  • grammar:document.cookie = 'a=100;expires=时间对象'
  • cookie using the world standard time, and we are using new Date () is our own time, that is, China's time zone time, +8时区
    we need to subtract eight hours in the cookie set time, is our right set time.

1. Set two cookie

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

2. After setting 15 seconds expired 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=时间对象'

Delete cookie

• Prior to the expiration time of the cookie set to the current time, that is not present, it means delete

<!-- 点击之后删除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>

Modify cookie

• Modify cookie is a key re-set the same cookie value

 <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>

Get cookie

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

• Here's cookie value is a string, to note that, behind each cookie has a ;plus一个空格

Fourth, the simple capsulation operation cookie

Set 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
  }
}

Get a certain 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
}

Change and delete the cookie value, is then set again to make the cookie time cookie or negative.

It can also be one step closer to re-change, delete cookie packaging operations. Here is not to dwell on them