[每日一题] 简述浏览器本地存储类型及各自优缺点

573 阅读2分钟

浏览器的本地存储主要有 Cookie,Web Storage(包括 localStorage 和 sessionStorage)和 IndexedDB。

Cookie

Cookie 是为解决 HTTP 协议的无状态属性而产生的。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。

服务器收到 HTTP 请求时,在响应头里面添加Set-Cookie字段。浏览器收到响应后通常会保存下 Cookie,之后对该服务器的每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。服务器拿到 Cookie 进行解析,便能拿到客户端的状态。

Cookie 的缺陷除了容量小(只有 4KB)外,还会带来额外的性能开销(尤其是在移动环境下)。因为服务器指定 Cookie 后,浏览器的每次请求都会携带 Cookie 数据(不管需不需要),这样随着请求数的增多,会造成巨大的性能浪费。

localStorage

localStorage 和 Cookie 一样都是同一域名下共享同一份数据,但 localStorage 容量比 Cookie 大得多,且不会随 http 请求一起发送。可以长期保留,关闭页面不会被清除。另外,localStorage 中的键值对总是以字符串的形式存储。

localStorage 的一个典型缺陷是不同窗口下数据不能独立、相互干扰。因为在同一域名下且同一个浏览器不同窗口页面间操作的是同一个 localStorage。例如,删除或添加一个数据,其它的窗口也会同步删除或者添加该数据。

sessionStorage

sessionStorage 和 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

可以用它对表单信息进行维护,将表单信息存储在里面,可以保证页面即使刷新也不会让之前的表单信息丢失。

IndexedDB

IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。它比 Web Storage 更适合存储大量的结构化数据。

IndexedDB 允许存储和检索用键索引的对象。使用 IndexedDB 执行的操作是异步执行的,以免阻塞应用程序。

以上各类型的使用方法 MDN 上已经讲的比较清除了,这里不在赘述。

————————

文章已同步至公众号 《前端做题家》,关注回复“资料”领取前端面试题和学习资料。

文章均为个人理解,仅供参考,欢迎留言讨论交流。