HTML5 技术的5大存储方式总结

jiandan97

HTML5 技术的5大存储方式总结

H5技术作为现在非常火一门，吸引着众多的求学者和渴望改变渴望高薪的同学们，从而慕名来到兄弟连IT教育（www/itxdl/cn）学习这个专业。众所周知，在H5技术中数据的储存是一个非常重要的内容，那H5有什么储存方式呢？

本地存储方式

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！常用的API有、getItem //取记录；setIten//设置记录；removeItem//移除记录；key//取key所对应的值；clear//清除记录。而存储的主要内容有以下几种：数组，图片，json，样式，脚本等等，只要是能序列化成字符串的内容都可以存储。

离线缓存方式

离线缓存常用的API有：0（UNCACHED） :  无缓存， 即没有与页面相关的应用缓存；1（IDLE） : 闲置，即应用缓存未得到更新；2 （CHECKING） : 检查中，即正在下载描述文件并检查更新；3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源；4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕；5 （IDLE） :  废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存。

当储存的时候出现的相关的事件，表示应用缓存状态的改变：

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

Web SQL数据库储存方式

Web SQL 数据库 API是一个独立的规范， 并不是 HTML5 规范的一部分，引入了一组使用 SQL 操作客户端数据库的 APIs。可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。其核心方法：

①openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

③executeSql：这个方法用于执行实际的 SQL 查询。

索引数据库储存方式

索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。

简单的整理希望对大家有所帮助，这些内容在兄弟连前端专业中都是有老师带着一起学习一遍的。每一个方式都从开始到储存成功都会看到效果。作为专业的培训学校，兄弟连（177<1011<6169）期待你的加入。