十年网站开发经验+多家企业客户+靠谱的建站团队
量身定制+运营维护+专业推广+无忧售后，网站问题一站解决
HTML5本地存储——WebSQLDatabase
在HTML5WebStorage介绍了html5本地存储的LocalStorage和SessionStorage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。
WebSQLDatabase
我们经常在数据库中处理大量结构化数据，html5引入WebSQLDatabase概念，它使用SQL来操纵客户端数据库的API，这些API是异步的，规范中使用的方言是SQLlite，你假如感兴趣，可以来我的裙，一起学习交流下，同时也欢迎每一位大神，前面是二五七，中间是014，后面是001，组合起来就是了，非常欢迎真心久留学习的。
三个核心方法
但是我们学一下也没什么坏处，而且能和现在W3C力推的IndexedDB做比较，看看为什么要废弃这种方案。WebSQLDatabase规范中定义的三个核心方法：
openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行SQL查询
html5本地存储有五种方案。
1、LocalStorage
LocalStorage就是Key-Value的简单键值对存储结构，WebStorage除了localStorage的持久性存储外，还有针对本次回话的sessionStorage方式，一般情况下localStorage较为常用，示例代码如下：
functionsave(dataModel){
varvalue=dataModel.serialize();
window.localStorage['DataModel']=value;
window.localStorage['DataCount']=dataModel.size();
console.log(dataModel.size()+'datasaresaved');
returnvalue;
}
functionrestore(dataModel){
varvalue=window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount']+'datasarerestored');
return'';
functionclear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount']+'datasarecleared');
deletewindow.localStorage['DataModel'];
deletewindow.localStorage['DataCount'];
2、Cookie
这种存储方式存储内容很有限，只适合做简单信息存储，存取接口设计得极其反人类，举例如下：
functiongetCookieValue(name){
if(document.cookie.length0){
varstart=document.cookie.indexOf(name+"=");
if(start!==-1){
start=start+name.length+1;
varend=document.cookie.indexOf(";",start);
if(end===-1){
end=document.cookie.length;
returnunescape(document.cookie.substring(start,end));
document.cookie='DataModel='+escape(value);
document.cookie='DataCount='+dataModel.size();
3、IndexedDatabaseAPI
IndexedDB可以存储结构对象，可构建key和index的索引方式查找，目前各浏览器的已经逐渐支持IndexedDB的存储方式，其使用代码如下，需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式，特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式，因此和NodeJS一样使用上不如同步的代码容易。
vartx=db.transaction("meters","readwrite");
varstore=tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id:data.getId(),
tag:data.getTag(),
name:data.getName(),
meterValue:data.a('meter.value'),
meterAngle:data.a('meter.angle'),
p3:data.p3(),
r3:data.r3(),
s3:data.s3()
});
tx.oncomplete=function(){
};
returndataModel.serialize();
4、FileSystemAPI
fs.root.getFile('meters.txt',{create:true},function(fileEntry){
console.log(fileEntry.toURL());
fileEntry.createWriter(function(fileWriter){
fileWriter.onwriteend=function(){
varblob=newBlob([value],{type:'text/plain'});
fileWriter.write(blob);
5、ApplicationCache
window.applicationCache对象是对浏览器的应用缓存的编程访问方式。其status属性可用于查看缓存的当前状态：
varappCache=window.applicationCache;
switch(appCache.status){
caseappCache.UNCACHED://UNCACHED==0
return'UNCACHED';
break;
caseappCache.IDLE://IDLE==1
return'IDLE';
caseappCache.CHECKING://CHECKING==2
return'CHECKING';
caseappCache.DOWNLOADING://DOWNLOADING==3
return'DOWNLOADING';
caseappCache.UPDATEREADY://UPDATEREADY==4
return'UPDATEREADY';
caseappCache.OBSOLETE://OBSOLETE==5
return'OBSOLETE';
default:
return'UKNOWNCACHESTATUS';
基本使用方法如下：localStorage.name="k1w1";这样的话，你的本地磁盘中就会有个数据库存下了这个数据。我无法接受数据写到了我的本地磁盘而我找不到它的确切位置，于是通过寻找发现：Chrome的存储方式是以sqlite的数据库文件形式存储。存在C:\Users\Username\AppData\Local\Google\Chrome\UserData\Default\LocalStorage中，虽然后缀名是.localstorege但是实际上就是sqlite的数据库文件，可以用sqlite打开，并看到其中的数据。这么蛋疼的找它存在哪里是因为我想删掉在学习使用localstorage时产生的一些垃圾数据，有点电脑洁癖。就像当初我喜欢选择性删除cookies一样。Firefox存在哪里暂时没有找到，感觉像是被加了密的sqlite数据库文件（这样的话firefox的安全性就高一些了），不过我每次关掉firefox它都会自动删掉所有浏览数据，所以也暂时不想找它存在哪了。
引言
正文开始~
h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。
对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。
目标
存储方式：
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
大小：
每个域名5M
支持情况：
注意：IE9localStorage不支持本地文件，需要将项目署到服务器，才可以支持！
常用的API：
getItem//取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
存储的内容：
数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）
HTML5的本地存储API中的localStorage与sessionStorage在使用方法上是相同的，区别在于sessionStorage在关闭页面后即被清空，而localStorage则会一直保存。
本地缓存应用所需的文件
使用方法：
①配置manifest文件
页面上：
Manifest文件：
manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest文件可分为三个部分：
①CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存
②NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
③FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）
完整demo：
服务器上：manifest文件需要配置正确的MIME-type，即"text/cache-manifest"。
如Tomcat:
常用API：
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
1（IDLE）:闲置，即应用缓存未得到更新
2（CHECKING）:检查中，即正在下载描述文件并检查更新
3（DOWNLOADING）:下载中，即应用缓存正在下载描述文件中指定的资源
4（UPDATEREADY）:更新完成，所有资源都已下载完毕
5（IDLE）:废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
表示应用缓存状态的改变：
checking:在浏览器为应用缓存查找更新时触发
error:在检查更新或下载资源期间发送错误时触发
noupdate:在检查描述文件发现文件无变化时触发
downloading:在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地下载地触发
updateready:在页面新的应用缓存下载完毕触发
cached:在应用缓存完整可用时触发
ApplicationCache的三个优势：
①离线浏览
②提升页面载入速度
③降低服务器压力
注意事项：
1.浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5MB）
2.如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3.引用manifest的html必须与manifest文件同源，在同一个域下
4.浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。
6.FALLBACK中的资源必须和manifest文件同源
7.更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。
8.站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
9.当manifest文件发生改变时，资源请求本身也会触发更新
离线缓存与传统浏览器缓存区别：
1.离线缓存是针对整个应用，浏览器缓存是单个文件
2.离线缓存断网了还是可以打开页面，浏览器缓存不行
3.离线缓存可以主动通知浏览器更新资源
关系数据库，通过SQL语句访问
WebSQL数据库API并不是HTML5规范的一部分，但是它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。
WebSQL数据库可以在最新版的Safari,Chrome和Opera浏览器中工作。
核心方法：
①openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
③executeSql：这个方法用于执行实际的SQL查询。
打开数据库：
执行查询操作：
插入数据：
读取数据：
索引数据库(IndexedDB)API（作为HTML5的一部分）对创建具有丰富本地存储数据的数据密集型的离线HTML5Web应用程序很有用。同时它还有助于本地缓存数据，使传统在线Web应用程序（比如移动Web应用程序）能够更快地运行和响应。
异步API：
在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式，比如打开数据库的操作
这样，我们打开数据库的时候，实质上返回了一个DB对象，而这个对象就在result中。由上图可以看出，除了result之外。还有几个重要的属性就是onerror、onsuccess、onupgradeneeded（我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用）。这就类似于我们的ajax请求那样。我们发起了这个请求之后并不能确定它什么时候才请求成功，所以需要在回调中处理一些逻辑。
关闭与删除：
数据存储：
我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异。
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明获取web前端入门资料，一起学习，一起成长！
工具/材料
SublimeText
01
首先打开SublimeText软件，在HTML界面中我们用HTML5语言布局一些输入框供用户输入信息，如下图所示
02
接下来我们在编写查找用户输入信息的界面，如下图所示，只需要一个输入框和一个按钮即可
03
然后我们在script标签中获取用户输入的信息，并且通过localStorage对象进行本地存储，如下图所示
04
下面实现信息查找的功能编写，这里主要是通过localStorage的getItem方法进行信息获取的，如下图所示
05
然后我们通过列表的形式将HTML5存储的信息都展示出来，如下图所示
06
接下来我们运行页面程序，在输入框里面输入你要添加的数据，这里简单的输入一些测试数据，然后点击新增记录按钮即可，如下图所示
07
当我们新增记录以后，就会在列表中看到我们增加的信息了，它是以键值对的形式存储的，如下图所示
08
最后在查找输入框里面我们输入键就会得到相应的值，如下图所示