这是我参与更文挑战的第7天，活动详情查看： 更文挑战
前提
众所周知，http协议是无状态的协议，所以在前端做用户信息存储是很有必要的，用户信息如果没有在页面保存的话，那么一刷新也就没有了，用户又得重新登录，那这个体验就很差了（用户投诉）。前端用的比较多的存储主要是 cookie，localStorage，sessionStorage，下面讲讲它们的异同，大家可以看完之后再决定用哪个方式来存储。
cookie
直译过来是 “曲奇”，是由服务端通过setCookie设置然后存储在前端的数据，后续的http请求中cookie会在请求header中携带，发送给服务端。
它有以下特点：
- 可以设置cookie的过期时间， 在过期时间之前一直有效，即使窗口或浏览器关闭
- 存放数据大小为4K左右
- 有个数限制（各浏览器不同），一般不能超过20个
- 每次都会携带在HTTP请求的header中
用法
设置
// username为cookie的name
// 答案cp3 为cookie的value
// expires 过期时间
// path 域名下的哪些路径设置
// domain 在哪个域名设置，不设置默认是当前域名，不包含子域名，设置后则会包含子域名 domain如果跟当前域名不一样，则设置不会成功
document.cookie="username=答案cp3; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/abc; domain=abc.com";
获取
// 获取cookie
function getCookie (name) {
let arr
const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
if ((arr = document.cookie.match(reg))) {
return decodeURIComponent(arr[2]) // 最好用decodeURIComponent解义
} else {
return null
}
}
getCookie('username') // 答案cp3
因为每次都会在HTTP的header中携带，http存储过多有可能会带来性能问题。于是乎，html5新增以下两种本地存储方式localStorage与 sessionStorage
localStorage
本地存储，它有以下特点：
- 没有过期时间，如果没有手动删除，则永久存储在浏览器端
- 只要ip/端口/协议三者一样（也就是同源）,即可共享
localStorage，即使是不同tab(同个浏览器) - 不同浏览器不能共享
- 最多能存储5M
- 键值对，以字符串的形式存储
用法
// 设置
localStorage.setItem("name", "答案cp3")
// 获取
localStorage.getItem("name") // 答案cp3
// 删除name
localStorage.removeItem("name")
// 删除所有
localStorage.clear()
sessionStorage
会话存储，它有以下特点：
- 关闭浏览器或者关闭tab标签页后
sessionStorage即被清除 - 不同tab页
sessionStorage不可共享， 除非同个tab下iframe是同源的 - 最多能存储5M
- 键值对，以字符串的形式存储
用法
// 设置
sessionStorage.setItem("name", "答案cp3")
// 获取
sessionStorage.getItem("name") // 答案cp3
// 删除name
sessionStorage.removeItem("name")
// 删除所有
sessionStorage.clear()
兼容性
cookie：基本上都兼容
localStorage/sessionStorage：主流浏览器，ie8及以上都兼容
安全性
前端存储是不安全的，之前的文章也分析过，XSS攻击 和CSRF攻击都有可能泄露数据，所以一般是不要存储密码等等之类重要的信息。
总结
以上就是我总结的cookie，localStorage，sessionStorage的异同和用法，大家了解后，再选择适合自己的存储方式，技术无优劣，适合自己才是最好的。
