盒子
盒子
文章目录
  1. cookie
  2. localStorage
  3. sessionStorage
  4. indexDB
  5. 几种存储方式之间的区别
  6. Service Worker

实现存储的几种方式

在浏览器中的存储方式有以下几种:

  • cookie
  • localStorage
  • sessionStorage
  • indexDB

这几种存储方式使用在不同的场景里,相互之间也有很多的区别。

Cookie是服务器发送到用户浏览器并保存在本地的一小块数据。cookie一般由后端设置,并通过response流发送给前端并设置过期时间。

在过期之前,cookie会一直存储在浏览器中,并且每次发送http请求时都会携带在http请求头中。

cookie的限制:

  • 存储空间只有4k
  • 存储时间有限
  • 存储在cookie中的数据在每次发送请求的时候都会将它带上,使得每次请求的数据都会无意义的增大

localStorage

localStorage生命周期是永久的,所以除非用户自己手动清除,否则就会一直存储在用户的浏览器中。

localStotage以键值对(Key-Value)的形式存储数据,可以存储数组、数字、对象等可以被序列化为字符串的数据。

sessionStorage

sessionStorage操作的方法与localStorage是一样的,区别在于sessionStorage在页面关闭后数据就会被清除,而localStorage则会一直保存。

刷新页面的时候sessionStorage不会被清除,但是打开同域新页面的时候不会访问到数据。

indexDB

indexDB是一种使用浏览器存储大量数据的方法,它创造的数据可以被查询,并且可以离线使用。有以下几个特性:

  • 它是一个对象仓库,存储的都是js对象
  • 所有的操作都是异步的,都是请求—响应模式
  • 所有的数据操作都是基于事务
  • 同源限制
  • 存储空间大,无限制
  • 支持二进制存储

几种存储方式之间的区别

1、cookie只有4k,远小于其他几种方式,indexDB最大

2、cookie参与与服务器通信,而其他几种方式不参与

3、cookie的声明周期一般由服务器决定,超过时间则被清除;localStorage除非手动清除,否则一直存在;sessionStorage是页面被关闭就会被清除;indexDB也是只能通过手动操作才能被清除

4、cookie需要注意安全性

Service Worker

Service Worker是运行在浏览器背后的独立线程,可以理解为一个介于客户端和服务器之间的一个代理服务器。在Service Worker一般做以下操作:拦截客户端的请求、向客户端发送消息、向服务器发起请求,但最主要的用途之一是离线缓存资源

Service Worker实现缓存功能一般分为三个步骤:注册Service Worker,监听install事件,缓存需要的文件。在下次用户访问的时候会拦截请求的方式查询是否存在缓存,如果存在就在缓存中读取缓存文件,如果不存在就会发起请求,然后在读取数据。

个人微信公众号

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集