前端存储方式有哪些？

cookies：

        浏览器缓存

        在HTML5标准前本地存储的主要方式。

        cookie由名称（一个唯一确定cookie的名称）、值（储存在cookie中的字符串值）、域（cookie对于哪个域是有效的）、路径（指定域中的指定路径）、失效时间（cookie何时应该被删除的事件）和安全指标（指定后，cookie只有在使用SSL连接时才发送到服务器）构成。

        优点：兼容性好，请求头自带cookie方便。

        缺点： 保存在客户端，存储量小受到限制，所有cookie的累加长度限制在4KB，超长会被忽略；自动请求头加入cookie浪费流量，每个domain（层）限制20个cookie，使用起来麻烦，需要自行封装； 

        设置过期时间自动删除，前后端自动同步。

localStorage：

        本地存储

        HTML5加入的以键值对（Key：Value）为标准的方式。

        优点： 操作方便，存储的数据没有过期时间（永久性存储，除非手动删除），大小为5M，兼容IE8+。

sessionStorage：

        临时存储

        和localStorage基本类似，存储的数据会在浏览器会话结束时被清除（即页面/浏览器关闭时）。⽽且与 cookie、localStorage 不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式；

Web SQL：

        数据库存储

·       2010 年被 W3C 废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql 类似于 SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们用JavaScript时要进⾏转换，较为繁琐。

IndexedDB：

        数据库存储

        是被正式纳⼊HTML5 标准的数据库储存⽅案，它是 NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合 web场景，同时⽤JavaScript 进⾏操作会⾮常便。