本地存储方式Indexed Database

HTML5问世以后，前端加入了一个重要的功能，便是本地存储，本地存储可分为4类：

Local Storage：总的存储量有所限制，并不能提供真正的检索API，数据的生命期比窗口或浏览器的生命期长，数据可被同源的每个窗口或者标签页共享，兼容性很好，使用最多的存储方式。

Session Storage：只要浏览器窗口不关闭就会一直存在，不应该把真正有价值的东西放在里面，数据会保存到存储它的窗口或者标签页关闭时，数据只在构建他们的窗口或者标签页可见

Indexed Database：在Indexed Database中，objectstore代替了传统的表的概念，每个objectstore相当于一个key和value的集合，IndexedDB并不像传统的如SQL Server那样需要额外安装。Indexed是存在于浏览器端的并且能被用户所访问控制。是保存不敏感用户数据的最佳方案，也可以用于创建本地应用。

Web SQL Database：实际上未包含在HTML5规范中。和Indexed Database都是在客户端存储大量结构化数据的解决方案。web sql database实现了传统的基于sql语句的数据库操作，而indexed database实现了nosql的存储方式。

Indexed Database通过直接执行同步或者异步的函数调用来检索树状的对象存储引擎。索引数据库API避开了查询字符串，它使用的底层API支持将值直接存储在javascript对象中。存储在数据库中的值可以通过键或使用索引获取到，并且可以使用同步或异步方式访问API。索引数据库也限定在同源范围内。

使用window.indexedDB.open()来打开数据库，它会触发error,success,upgradeneeded这三个事件,为了记录Indexed Database的API我写了一个本地APP示例，此APP用于记录我们生活中一些不是很敏感的账号密码（如：论坛账号之类的，灵感来源于一次上司的忘记密码，做之前我只考虑APP为本地应用无联网，我并没有考虑到其他众多的安全性，所以只做为示例看，也请给位给予完善）。其实使用Indexed Database能衍生很多本地应用，记事本、备忘录等等。这是最终效果图：

检查是否支持，打开数据库；现在Indexed Database的兼容性在手机上是很好的，详细的可以到caniuse.com去查看具体兼容

向users中添加数据。

读取users的数据，读取有两种方式读取一条和读取全部，读取全部数据时，continue()用于继续读取下一条

删除数据

这些只是IndexedDB的一些基本操作。示例源码：github.com/wenlei0617/Indexed_database

关于web sql database是使用的sql语句进行操作，因为不再维护，具体可以到网上做了解。

作者：_Gary
链接：https://www.jianshu.com/p/22ae49e8c2b7