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语句进行操作,因为不再维护,具体可以到网上做了解。