本地存储有 localStrong、sessionStrong、cookie ，三者都有个各自的特点
- localStrong 存储的数据是长期的，除非手动删除，否则关闭页面也会存在。在同一浏览器内多个窗口的是数据共享的，容量大概有5M
- sessionStrong 存储的数据时会话式的，关闭页面后数据也就自动清除，在同一浏览器内多个窗口的是数据共享的，容量大概有5M
- cookie 存储的数据默认是关闭浏览器后失效, 但可以设置过期时间，容量大小约(4KB左右)和个数(20~50)
localStrong添加过期时间
localStrong是经常用的一种方式，但有时候localStrong的永久保存特性并不能满足需求。如用户点击登录时，如果用户勾选了记住密码，此时应该保存用户的密码，但应该添加一个有效期，有效期过后需用户重新登录，这样更具有安全性
思路：
- 在存储数据时，多存入一个字段 expriyTime(当前登录成功时的时间戳 + 需要保留的过期时间(如3天))；
- 获取用户登录信息时，则用当前的时间戳与本地数据的 expriyTime 字段作比较，若大于 time 的值，则表示已经过期，需用户重新登录；
存储数据
// 用户点击登录按钮
$('.loginBtn').on('click', () => {
/* 1、 ... 省略登录预验证 */
/* 2、... 省略当预验证通过后发起登陆请求 */
/* 2.1 登录成功的处理 */
// 获取当前的时间戳
let currentTime = +new Date()
// 用户的密码保存 3 天时间 3天 * 一天24h * 1小时60分钟 * 1分钟60秒 * 1秒1000毫秒
let saveTime = 3 * 24 * 60 * 60 * 1000
let loginInfo = ｛
token: 'xxx', // 服务器返回的token字符串
expriyTime: currentTime + saveTime // 有效期，单位: 毫秒
｝
// 存储数据
// 注意：本地存储只能存储字符串数据格式，需将对象转换为 JSON 格式的字符串
localStrong.setItem('loginInfo', JSON.stringify(loginInfo))
/* 2.2 ... 省略登录失败的处理 */
})
获取数据
// 获取用户的登录信息
let loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
// 用户尚未登录
if(loginInfo) {
...
return
}
// 用户已登录
if (+new Date() > loginInfo.expriyTime) {
// 登录信息已过期
// 删除登陆信息，需用户重新登录
localStorage.removeItem('loginInfo')
...
return
} else {
// 登录信息还在有效期内
...
return
}
}
