详解前端开发中的存储方案

作者: huip 发布时间: 2018-09-10

在前端开发过程中,我们经常会遇到需要将数据存储在浏览器端的应用场景,那么浏览器端到底为我们都提供了哪些解决方案呢?接下来笔者将分别为大家介绍浏览器端的三种常用存储方案–cookie、localStorage和sessionStorage。

基本概念

Cookie俗称小甜心,是最古老的浏览器端的存储方案。其设计的初衷是为了解决无状态的HTTP协议传输用户登录信息的问题。

特性

  1. Cookie可以设置过期时间。
  2. 每个域下最大存储空间4KB。
  3. Cookie的数据将会随着每个HTTP请求发送给服务端。(HTML,images,Javascript,CSS等)– 增加了客户端和服务端通信时的信息传输量。
  4. 满足浏览器同源策略,只能在同一域下访问和设置数据。
  5. 可以被js和服务端语言同时操作

localStorage

localStorage是HTML5引入的浏览器端的存储方案

特性:

  1. 每个域下最大存储空间5MB。
  2. 其存储的数据不会通过HTTP请求发送到服务端,可以减少HTTP请求的负载。
  3. 满足浏览器同源策略,只能在同一域下访问和设置数据。
  4. 只能被js操作

sessionStorage

和localStorage一样sessionStorage也是HTML5引入的浏览器端的存储方案

特性:

  1. 每个域下最大存储空间5MB。
  2. 其存储的数据不会通过HTTP请求发送到服务端,可以减少HTTP请求的负载。
  3. 只能在同一个窗口(对于Chrome和Firefox来说对应为一个标签栏)下访问和设置数据。当窗口或者标签栏关闭时页面存储的数据将会被删除。
  4. 在同一个窗口或标签栏下设置的数据才能允许被访问
  5. 只能被js操作

总结

通过以上分析,我们能够清楚的了解到浏览器端三种存储方案的特性及优缺点。由于sessionStorage在关闭标签页或窗口时就会被清除,所以sessionStorage不太好管理和控制,可能会导致一些奇怪的Bug,因此笔者不推荐使用sessionStorage。

使用场景

由于Cookie在HTTP请求时会自动携带,因此Cookie比较适用于存储用户的登录会话状态,这样只需要在登录时设置一下Cookie前端就不需要后续人为管理Cookie的传输问题了。

localStorage作为一种对Cookie存储空间的补充,比较适合存放数据量相对较大的数据,比如用户在浏览器端的基础配置信息、购物车信息等

最后,出于安全性的考虑,由于存在XSS攻击的风险,因此敏感的用户数据最好不要存储在浏览器端。

如果你认为我的文章对你有帮助,欢迎点击上方按钮对我打赏

推荐阅读

linux文件系统权限详解