有几种前端储存的方式？这些方式的区别是什么？

有几种前端储存的方式？这些方式的区别是什么？

前端的存储方式有5种

1. cookies
2. localstorage
3. sessionstorage
4. Web SQL
5. IndexedDb

这些存储方式有什么区别？

• cookies:在HTML5标准前本地储存的主要方式，优点是兼容性好，请求自带cookie，缺点是大小只有4k,自动请求头加入cookie浪费流量，每个domain限制20个cookie,使用起来麻烦需要自行封装。

• localStorage:HTML5加入的以键值对（key-value)为标准的方式，优点是操作方便，永久性储存(除非手动删除)大小为5M，兼容IE8+
  -sessionStorage:与localStorage基本类似，区别是sessionStorage当前页面关闭后会被清理，而且cookie、localStorage不同，它不能在所有同源窗口中共享，是会话级别的储存方式。

• Web SQL:2010年被W3C废弃的本地数据存储方案，但是主流浏览器(火狐除外)都已经有了相关实现web sql类似于SQLite,是真正意义上的关系型数据库，用sql进行数据操作，当我们用Java Script时要进行转换，较为繁琐。

• IndexedDB:是被证实纳入HTML5标准的数据存储方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取，非常适合web场景，同时用Java Script进行操作会非常方便。