前端常用的存储方案

学习分享2年前 (2022)更新 bestcyt

147 0 0

Cookie用途：

当登录一个网站的时候。

客户端会将登录的账号和密码发送到服务器。
服务器对账号和密码进行加密算法之后生成session文件，然后会在响应时将set-cookie带在响应头。
客户端接着会将cookie保存在内存中。
客户端下次请求的时候，会将cookie作为请求头发往服务器。
服务器将对客户端传过来的cookie与session文件进行校验，如果校验通过，则可以直接登录。

在购物场景中。

客户端会将用户已经选购的商品1发往服务器。
服务器会生成一份session文件，在响应时带上set-cookie发往客户端。
客户端会保存服务端传来的cookie.
用户再次选择商品2，进行以上同样的操作。
此时用户需要结账，客户端会将cookie发往服务器
进入结账页面时就会出现两个商品。

Cookie缺点：
1.Cookie的大小限制在4kb左右。对于复杂的存储来说是不够的
2.Cookie会被附加在每个HTTP请求中，所以会增加HTTP请求大小
3.由于Cookie都是在HTTP请求中明文传递的，会有安全性问题（除非使用HTTPS）

Web Storage

Storage原型对象

sessionStorage和localStorage对象都是继承自Storage原型对象的。在Storage对象中存在以下方法

clear(): 清除所有storage
setItem(name, value): 设置storage, 也可以通过点语法或者方括号设置
getItem(name): 获取name对应的value值, 也可以通过点语法或者方括号获取
removeItem(name): 删除单个storage。 也可以通过delete操作符删除
key(index): 获取index位置处的name

sessionStorage

sessionStorage存储大小为5MB（大多数浏览器）。它属于一种非持久化数据，在浏览器关掉时数据就消失了。同时，在浏览器未关闭，而重新开一个页面(切换了路径)，也是无法访问到sessionStorage的。因此在多页面应用时有限制。可以使用localStorage来代替。
由于sessionStorage是对象，所以可以通过for-in语句或者结合length属性来遍历每个storage值，对于localStorage对象来说也是适用的。

// 方法一
for (let key in window.sessionStorage) {
    let value = window.sessionStorage[key]
    console.log(`${key}=${value}`)
}
// 方法二
for (let i = 0; i < window.sessionStorage.length; i++) {
    let key = window.sessionStorage.key(i)
    let value = window.sessionStorage[key]
    console.log(`${key}=${value}`)
}

localStorage

localStorage的存储大小也为5MB（大多数浏览器）。localStorage会存储在本地操作系统的文件中。在数据时效性上，localStorage并不会想cookie那样可以设置数据的过期时间。也就是说，只要用户不主动删除localStorage，localStorage存储的数据将会永久存在。
注意，localStorage无法跨浏览器存在。
这样介绍一个看，localStorage即比Cookie拥有更大的数据存储空间，而且数据也是持久化的，不会随着网页的关闭而消失，好像可以代替Cookie来做用户身份验证。
其实是不能的。我们知道，通常可以通过XSS漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录。但是为了防止通过XSS获取到Cookie数据，服务器可以配置httpOnly来保护Cookie，禁止浏览器通过脚本document.cookie获取到Cookie。而localStorage存储没有对XSS攻击有任何的防御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据（如重要的用户名、密码）就极容易被获取到。因此重要的信息不要存储在storage对象中。