浏览器中都有哪些存储（Cookie、LocalStorage......）？

随着前端技术的不断发展，现在已经有了非常多的技术来将数据存储在浏览器中，但你都清楚他们之间的区别吗？

现在都有哪些存储技术？

我们打开浏览器，按下F12，点选Application，可以看到这么多的存储技术：

1

下面我们一一介绍这些存储以及他们之间的区别。

Cookies

先拿这个最早出现的技术下手，因为http协议是无状态的，也就是说浏览器无法完成记忆功能，试想一下，当你登录了一次后浏览器不会记住你已经登录了，当你继续操作的时候，浏览器又提示你登录，如此无限循环...，所以一位程序员发明了Cookies来记录访问者的状态，让访问者可以和系统很自然的交互，它可以是永久记录的，也可以是有限期记录的，取决于功能的需要。
但是Cookies能存储的数据大小非常小（4K），只用来存关键的数据。

LocalStorage

这个技术是Html5中的新特性，用于本地存储数据，LocalStorage方法存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用，直到手动去除。
LocalStorage能存储2-10M（各大浏览器实现不同）的数据，比Cookies的4K大的多。

SessionStorage

SessionStorage针对一个 session（会话，简单理解就是和系统的持续交互） 进行数据存储。用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
SessionStorage和LocalStorage一样，存储大小限制在2-10M（各大浏览器实现不同）。

但是其实Cookies并不会被LocalStorage、SessionStorage取代，Cookies的作用是让无状态的Http变得有状态，所以Cookies会被自动放入每次http请求的请求头中，作为每个会话的标识，而LocalStorage和SessionStorage则不会自动加入http请求，并且Cookies有对应机制保障，在防止第三方植入js代码恶意读取篡改方面做的比较好，所以我认为这两个新标准的职能更多的是辅助Cookies。

WebSQL

这是一个在浏览器中的关系型数据库，但这却是一个被废弃的标准，原因是有两方面，一是各大浏览器厂商实现不一，对标准的执行并不好，二是使用SQL语句用一定学习成本，前端开发人员似乎不那么乐意为了使用这个而费力去学习一份新的语言。

IndexedDB

这是Html5中的新标准，是一个浏览器中的非关系型数据库，也就是说它的出现可能是因为WebSQL中需要学习sql语句这一硬伤，IndexedDB存储空间相当大（一般来说不少于 250MB，甚至没有上限），并且支持事务等高级功能。

CacheStorage

它用来存储 Response 对象，也就是说他是用在接受Http请求的响应结果的。

ApplicationCache

这是Html5的离线缓存，也就它能够让你的页面，在设备断网的时候，依旧可以读取到一些已经缓存在离线缓存里的数据，让你的Html5应用可以有类似安装后的App的体验，比如说PWA。

只是简单写了一下，以后还会继续补充