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

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

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

// utils/cookie.js
export default {// 设置cookiesetCookie: function (name, value, expireDays) {var expires = nullif (expireDays) {var exp = new Date()exp.setDate(exp.getDate() + expireDays)expires = exp.toGMTString()}document.cookie = name + '=' + escape(value) + (expires ? ';expires=' + expires : '')},// 获取指定名称cookiegetCookie: function (name) {if (document.cookie.length === 0) {return null}var arr = nullvar reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')if (arr = document.cookie.match(reg)) {return unescape(arr[2])} else {return null}},// 删除cookieremoveCookie: function (name) {if (!this.getCookie(name)) {return}this.setCookie(name, '', -1)},// 清空cookieclearCookie: 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 = nullif (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 = nullvar 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)}
}