前端面试之存储问题

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

  • cookie
  • localStorage
  • sessionStorage
  • indexDB

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

cookie

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事件,缓存需要的文件。在下次用户访问的时候会拦截请求的方式查询是否存在缓存,如果存在就在缓存中读取缓存文件,如果不存在就会发起请求,然后在读取数据。

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值