js-cookie 库与 document.cookie 的区别

背景：前端登录功能要做一个记住密码的功能。每次用户在登录页面点击登录时，把用户输入的用户名和密码保存到cookie中就可以了，当用户再登录时，再从cookie中获取用户名和密码填充到表单中就可以了。当然，也可以选择保存在localStorage中。

Document.cookie

document,cookie 主要是存储数据的，主要是写入、读取、删除操作的 API 掌握。

// 1. 写入cookie, 会追加到当前的cookie中
document.cookie = 'username=abc'
// 2. 读取cookie，可以用正则匹配或者字符串解析查找的方法来读取
var usename = /username=(\S+);/.exec(document.cookie)[1] // 这里只是简单的匹配了下，实际开发中要考虑很多情况
// 3. 删除cookie，设置某个cookie过期即可
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT'
// 4. 判断是否有某个cookie，其实和读取差不多
/username=(\S+);/.test(document.cookie) // true有，false没有

它的 api 就是对"键值对"这种数据结构进行操作。Document.cookie 其实也是 key=value 这种键值对结构。当然我们也可以封装一下使用其对外的方法。

// 设置缓存方法
setCookie (name, value, minute) {
  let d = new Date()
  d.setTime(d.getTime() + (minute * 60 * 1000))
  let expires = 'expires=' + d.toUTCString()
  document.cookie = name + '=' + value + '; ' + expires
}

getCookie (name) {
  let arr
  let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
  if (arr === document.cookie.match(reg)) {
    return decodeURIComponent(arr[2])
  } else {
    return ''
  }
}
clearCookie (name) {
  // this.setCookie(name, '', -1)
  var exp = new Date()
  exp.setTime(exp.getTime() - 1)
  var cval = this.getCookie(name)
  if (cval != null) { document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() }
}
getData () {
  let cookieString = document.cookie
  let arr = cookieString.split(';')
  for (let key in arr) {
    if (arr[key].indexOf('accessKeyId') > -1) {
      accessKeyId = arr[key].split('=')[1]
    }
    ......
  }
}

js-cookie

js-cookie库使用起来很简单，支持向浏览器中写入、读取、删除cookie三种操作，API简单也符合我们的使用习惯。

set方法在写入cookie时会先对cookie值encodeURIComponent然后再decodeURIComponent，这样可以保证存储再cookie中的值始终是不编码的可读性性好的字符串。