前端常用的存储方案

Cookie用途:

当登录一个网站的时候。

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

在购物场景中。

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

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对象中。

豫ICP备17012861号