Local Storage,Session Storage,IndexedDB,Web SQL,Cookies简介

一 概述

Local  Storage,Session Storage,IndexedDB,Web SQL,Cookies都是浏览器中具有实现前端本地存储功能的介质。在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Web Storage(Local Storage和Session Storage)与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储比较难处理,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。

Local Storage,Session Storage,IndexedDB,Web SQL,Cookies简介_第1张图片

二 Cookie

Cookie数据始终在同源的Http请求中携带(即使不需要),在HttpRequest和HttpResponse的Header中实现浏览器和服务器间来回传递,最后保存在客户端,这样需要占用一些流量,同时Cookie数据还有path属性,可以限制Cookie只属于该路径下,且Cookie大小不能超过4k,所以Cookie只是适合保存较小的数据,如回话标识,用户登录信息,网站记住密码的功能通常是通过在Cookie中保存一段辨别用户身份的数据来实现。值得注意的是由于Cookie在Http协议请求中是以明文方式传递的(Https协议请求中不是),所以存在一定的安全性问题。此外Cookie只在设置的过期时间之前有效,即使窗口或者浏览器关闭,此外在所有同源的浏览器窗口可以实现Cookie的共享。

三 Local Storage&Session Storage

Local Storage与Session Storage是Web Storage提供的两种API,是HTML5中新增的本地同源存储解决方案之一,都是一种前端客户端本地存储慨念。

Local Storage是可以永久保存在浏览器本地,即使浏览器窗口或者浏览器关闭也不会被清除,除非显式的清除,所以用作客户端持久化数据,同时数据可以在所有同源窗口进行共享。其中数据不参与和服务器之间的通信,一般可以保存5M大小的数据。

Session Storage是会话级别的存储,用于本地存储会话(session)数据,且存储的数据只是在当前浏览器窗口的同一个会话页面有效,会话结束后数据也会随之销毁,所以不能进行持久化存储,且数据不会在浏览器窗口进行共享,即使是不同窗口的相同页面。其中数据不参与和服务器之间的通信,一般可以保存5M大小的数据。

四 Cookie&Local Storage&Session Storage之间比较

特性 Cookie Local Storage Session Storage
数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被显式清除,否则永久保存 会话级存储,仅在当前会话下有效,会话结束,关闭页面或浏览器后被清除
存放数据大小 4KB左右 5MB~10MB(浏览器不同,情况不同) 5MB~10MB(浏览器不同,情况不同)
与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能和安全问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 源生的Cookie接口不友好,开发者需要根据需求封装 源生接口良好,亦可再次封装来对Object和Array有更好的支持 源生接口良好,亦可再次封装来对Object和Array有更好的支持
应用场景 用户登录时,保存服务器返回的一段加密过的唯一辨识单一用户的code,用以判断当前用户登录状态,或者之前电商网站用来保存用户的购物车信息。 Local Storage可以替代Cookie完成用户购物车信息的前端保存功能,同时可以当作HTML5游戏的本地数据的存储空间。 当页面存在多表单的情况下,可以利用Session Storage实现表单页拆分,优化用户体验。
注意 不要将系统敏感的数据保存到Cookie,Local Storage,Session Storage中,防止XSS注入的风险。因为XSS注入可以通过控制台对你的属性值进行修改。

五 IndexedDB

如Cookies,Local Storage,Session Storage都是浏览器端的数据存储方案,但是不适合大量数据的存储,而且不提供搜索功能,不能建立自定的索引。而IndexedDB就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。它可以存储大量数据,提供了查找接口,能够建立索引。但是不属于关系型数据库(不支持SQL查询语句,更类似于NoSQL数据库)。

IndexedDB的特点:

  1. 键值对存储:IndexedDB内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括JavaScript对象。对象仓库中,数据以“键值对”的形式保存。每一个数据记录都有对应的主键,主键是唯一的,如果重复会抛出一个错误。
  2. 异步:IndexedDB操作不会锁死浏览器,用户依然可以进行其他操作,与Local Storage的同步操作不同,异步的设计是为了大量数据的读写,拖慢页面的表现,降低用户体验。
  3. 支持事务:IndexedDB支持事务(transaction),这意味着一些列操作步骤中,只要有某个步骤出现异常,则整个事务就会消失,数据库回滚到事务发生之前的状态,不存在只写一部分数据的情况。
  4. 同源限制:IndexedDB受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能够访问跨域的IndexedDB数据库。
  5. 存储空间大:IndexedDB的存储空间一般不少于250MB,或者更大。
  6. 支持二进制存储:IndexedDB不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer对象和Blob对象)。

参考资料:浏览器数据库IndexedDB入门教程

你可能感兴趣的:(Java,Web技术解析,前端框架,数据库,Cookie,Local,Storage,Session,Storage,IndexedDB,NoSQL)