js怎么保存用户登录信息？js cookie操作封装

在web开发中，用户登录后需要保存登录信息进行身份识别，登录后的操作都需要带上身份信息请求接口。保存登录信息有多种方法，这里使用cookie进行操作。

最终成果：封装cookie操作模块

// utils/cookie.js
export default {
  // 设置cookie
  setCookie: function (name, value, expireDays) {
    var expires = null
    if (expireDays) {
      var exp = new Date()
      exp.setDate(exp.getDate() + expireDays)
      expires = exp.toGMTString()
    }
    document.cookie = name + '=' + escape(value) + (expires ? ';expires=' + expires : '')
  },
  // 获取指定名称cookie
  getCookie: function (name) {
    if (document.cookie.length === 0) {
      return null
    }
    var arr = null
    var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
    if (arr = document.cookie.match(reg)) {
      return unescape(arr[2])
    } else {
      return null
    }
  },
  // 删除cookie
  removeCookie: function (name) {
    if (!this.getCookie(name)) {
      return
    }
    this.setCookie(name, '', -1)
  },
  // 清空cookie
  clearCookie: function () {
    var cookies = document.cookie.match(/[^ =;]+(?=\=)/g)
    if (!cookies) {
      return
    }
    /*
    var exp = new Date()
    exp.setTime(exp.getTime() - 1)
    var expires = exp.toGMTString()
    for (var i = cookies.length; i--;) {
      document.cookie = cookies[i] + '=;expires=' + expires
    }
    */
    for (var i = cookies.length; i--;) {
      this.setCookie(cookies[i], '', -1)
    }
  }
}

cookie工具模块使用示例：

  import cookie from 'path/to/utils/cookie.js'
  cookie.clearCookie()
  cookie.setCookie('name', 'Alice', 1)
  cookie.setCookie('age', 20, 1)
  console.log(cookie.getCookie('name'))
  console.log(cookie.getCookie('age'))
  cookie.removeCookie('age')
  console.log(cookie.getCookie('age'))

下面是步骤拆解过程：

一、设置cookie，写入cookie

基础用法

// 创建cookie
document.cookie = 'name=Alice'
console.log(document.cookie) // 'name=Alice'

// 继续添加cookie
document.cookie = 'age=5000'
console.log(document.cookie) // 'name=Alice; age=5000'

// 修改cookie，名称相同的cookie会覆盖已有cookie的值
document.cookie = 'name=Tony'
console.log(document.cookie) // 'age=5000; name=Tony'

以上代码创建cookie时没有指定过期时间，cookie将会在浏览器关闭时自动删除。

设置过期时间

下面给cookie设置过期时间，过期后cookie将自动删除，否则将会保存在本地文件系统中。

// 创建cookie时，带上过期时间 expires
// 在name-value后添加分号; 再加上expires=日期时间转位GTM格式
document.cookie = 'age=5000; expires=' + new Date().toGMTString()
// 以上代码设置过期时间为当前时间，所以cookie会立即过期

// 设置过期时间为10秒后
document.cookie = 'age=5000; expires=' + new Date(new Date().getTime() + 10 * 1000).toGMTString()

设置cookie方法封装

// 设置cookie
function setCookie(name, value, expireDays) {
  var expires = null
  if (expireDays) {
    var exp = new Date()
    exp.setDate(exp.getDate() + expireDays)
    expires = exp.toGMTString()
  }
  document.cookie = name + '=' + escape(value) + (expires ? ';expires=' + expires : '')
}

// test
setCookie('name', 'Alice', 1)

二、获取cookie

基础用法

var cookieStr = document.cookie
// 'name=Alice'

根据name获取cookie值

// 获取指定名称cookie
function getCookie(name) {
  if (document.cookie.length === 0) {
    return null
  }
  var arr = null
  var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
  if (arr = document.cookie.match(reg)) {
    return unescape(arr[2])
  } else {
    return null
  }
}

// test
getCookie('name')
// 'Alice'

三、删除cookie

// 删除cookie
function removeCookie(name) {
  if (!getCookie(name)) {
    return
  }
  setCookie(name, '', -1)
}

// test
removeCookie('name')

removeCookie方法先查询是否存在该cookie，存在则设置过期时间为1天前，即立即过期。

四、清空cookie

// 清空cookie
function clearCookie() {
  var cookies = document.cookie.match(/[^ =;]+(?=\=)/g)
  if (!cookies) {
    return
  }
  var exp = new Date()
  exp.setTime(exp.getTime() - 1)
  var expires = exp.toGMTString()
  for (var i = cookies.length; i--;) {
    document.cookie = cookies[i] + '=;expires=' + expires
    // 或直接调用上面的 setCookie 方法
    // setCookie(cookies[i], '', -1)
  }
}

遇到cookie使用的时候就可以直接用这个工具模块，效率加倍！