说说浏览器缓存里的websql与 indexeddb - 好文

首先明确h5缓存的几种形式：1、本地存储(localstorage && sessionstorage)
2、离线缓存(application cache)；

3、websql与 indexeddb
WebSQL也是一种在浏览器
<https://www.baidu.com/s?wd=%E6%B5%8F%E8%A7%88%E5%99%A8&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库
<https://www.baidu.com/s?wd=NoSQL%E6%95%B0%E6%8D%AE%E5%BA%93&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
,而WebSQL更像是关系型数据库
<https://www.baidu.com/s?wd=%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
,使用SQL查询数据。
【应该Web sql兼容性
<https://www.baidu.com/s?wd=%E5%85%BC%E5%AE%B9%E6%80%A7&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
更好！】
1.Web Sql Database，中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器
<https://www.baidu.com/s?wd=%E6%B5%8F%E8%A7%88%E5%99%A8&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
端运行的轻量级数据库。
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序
<https://www.baidu.com/s?wd=Web%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
的性能，减轻了服务器端
<https://www.baidu.com/s?wd=%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。
在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端
<https://www.baidu.com/s?wd=%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。
2.IndexedDB是HTML5规范里新出现的浏览器
<https://www.baidu.com/s?wd=%E6%B5%8F%E8%A7%88%E5%99%A8&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local
storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储
<https://www.baidu.com/s?wd=%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8&from=1012015a&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4PhRYuj9BnHbYrH79ry790ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH6vnWcLPHb1n1f1PjD4PHTYPs>
和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。

IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。
举个IndexedDB的使用demo<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<title>indexedDB-demo</title> </head> <script src="indexDb.js"
type="text/javascript"></script> <script type="text/javascript"> function
init() { var dbParams = new Object(); dbParams.db_name = "SISO";
dbParams.db_version = "2"; dbParams.db_store_name = "Test";
dbObject.init(dbParams); } function Tinsert() { // 填入初始值 dbObject.put({ title:
"Quarry Memories", author: "Fred", isbn: 123456 }, 1); dbObject.put({ title:
"Water Buffaloes", author: "Fred", isbn: 234567 }, 2); dbObject.put({ title:
"Bedrock Nights", author: "Barney", isbn: 345678 }, 3); } function Tselect() {
dbObject.select(3); } function Tupdate() { dbObject.put({ title: "Quarry wu",
author: "lex", isbn: 123456 }, 1); } function Tdelete() { dbObject.delete(3); }
function Tclear() { dbObject.clear(); } function getall(){
dbObject.getAlldata(); } </script> </head> <body onload=" init() "> <input
type="button" value="新增几条数据" onclick=" Tinsert(); "/> <input type="button"
value="查找一条记录" onclick=" Tselect(); "/> <input type="button" value="删除一条记录"
onclick=" Tdelete(); "/> <input type="button" value="更新一条记录" onclick="
Tupdate(); "/> <input type="button" value="清除所有表数据" onclick=" Tclear(); "/>
<input type="button" value="查询所有表数据" onclick=" getall(); "/> </body> </html>
(function(){ var dbObject = {}; dbObject.init = function(params){ this.db_name
= params.db_name; this.db_version = params.db_version; this.db_store_name =
params.db_store_name; if (!window.indexedDB) {
window.alert("你的浏览器不支持IndexDB,请更换浏览器"); } var request =
indexedDB.open(this.db_name,this.db_version); //打开数据失败 request.onerror =
function(event) { alert("不能打开数据库,错误代码: " + event.target.errorCode); };
request.onupgradeneeded = function(event) { this.db = event.target.result;
this.db.createObjectStore(dbObject.db_store_name); }; //打开数据库 request.onsuccess
= function(event) { //此处采用异步通知. 在使用curd的时候请通过事件触发 dbObject.db =
event.target.result; }; }; /** * 增加和编辑操作 */ dbObject.put = function(params,key)
{ //此处须显式声明事物 var transaction = dbObject.db.transaction(dbObject.db_store_name,
"readwrite"); var store = transaction.objectStore(dbObject.db_store_name); var
request = store.put(params,key); request.onsuccess = function(){ alert('添加成功');
}; request.onerror = function(event){ console.log(event); } }; /** * 删除数据 */
dbObject.delete = function(id) { // dbObject.db.transaction.objectStore is not
a function request = dbObject.db.transaction(dbObject.db_store_name,
"readwrite").objectStore(dbObject.db_store_name).delete(id); request.onsuccess
= function(){ alert('删除成功'); } }; /** * 查询操作 */ dbObject.select = function(key)
{ //第二个参数可以省略 var transaction =
dbObject.db.transaction(dbObject.db_store_name,"readwrite"); var store =
transaction.objectStore(dbObject.db_store_name); if(key) var request =
store.get(key); else var request = store.getAll(); request.onsuccess = function
() { console.log(request.result); } }; /** * 清除整个对象存储(表) */ dbObject.clear =
function() { var request =
dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).clear();
request.onsuccess = function(){ alert('清除成功'); } }; // 查询所有数据
dbObject.getAlldata = function() { var request =
dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).getAll();
request.onsuccess = function(){ alert('查询成功'); console.log(request.result) } };
window.dbObject = dbObject; })();
在vue当中如何用？ var dbObject = {}; dbObject.init = function(params){ this.db_name
= params.db_name; this.db_version = params.db_version; this.db_store_name =
params.db_store_name; if (!window.indexedDB) {
window.console.log("你的浏览器不支持IndexDB,请更换浏览器"); } var request =
indexedDB.open(this.db_name,this.db_version); //打开数据失败 request.onerror =
function(event) { console.log("不能打开数据库,错误代码: " + event.target.errorCode); };
request.onupgradeneeded = function(event) { this.db = event.target.result;
this.db.createObjectStore(dbObject.db_store_name); }; //打开数据库 request.onsuccess
= function(event) { //此处采用异步通知. 在使用curd的时候请通过事件触发 dbObject.db =
event.target.result; console.log('indexDB连接成功') }; }; /** * 增加和编辑操作 */
dbObject.put = function(params,key) { //此处须显式声明事物 var transaction =
dbObject.db.transaction(dbObject.db_store_name, "readwrite"); var store =
transaction.objectStore(dbObject.db_store_name); var request =
store.put(params,key); request.onsuccess = function(){ console.log('添加成功'); };
request.onerror = function(event){ console.log(event); } }; /** * 删除数据 */
dbObject.delete = function(id) { // dbObject.db.transaction.objectStore is not
a function request = dbObject.db.transaction(dbObject.db_store_name,
"readwrite").objectStore(dbObject.db_store_name).delete(id); request.onsuccess
= function(){ console.log('删除成功'); } }; /** * 查询操作 */ dbObject.select =
function(key) { //第二个参数可以省略 var transaction =
dbObject.db.transaction(dbObject.db_store_name,"readwrite"); var store =
transaction.objectStore(dbObject.db_store_name); if(key) var request =
store.get(key); else var request = store.getAll(); request.onsuccess = function
() { console.log(request.result); } }; /** * 清除整个对象存储(表) */ dbObject.clear =
function() { var request =
dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).clear();
request.onsuccess = function(){ console.log('清除成功'); } }; // 查询所有数据
dbObject.getAlldata = function() { var request =
dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).getAll();
request.onsuccess = function(){ console.log('查询成功');
console.log(request.result) } }; window.dbObject = dbObject; //export default
dbObject;

然后再main.js里引用
import dbObject from './dbObject';
在组建中的调用封装方法当然就是

dbObject.具体方法

小坑：

关于transaction is underfine！！
beforeMount(){ this.indexDBinit(); }, mounted(){ setTimeout(function(){
dbObject.select(1); //1为你自己添加的key },1000) },
其中indexDBinit是methods里面的一个方法用来初始化你的数据库
indexDBinit(){ var dbParams = new Object(); dbParams.db_name = "SISO";
dbParams.db_version = "2"; dbParams.db_store_name = "Test";
dbObject.init(dbParams); },其他方法参见此博文。

websql

对sql熟悉的人就很好理解websql了

学习传送门 <http://www.runoob.com/html/html5-web-sql.html>
补充关系型数据库和非关系型数据库的区别（摘）

1.实质。
非关系型数据库的实质：非关系型数据库产品是传统关系型数据库的功能阉割版本，通过减少用不到或很少用的功能，来大幅度提高产品性能。

2.价格。

目前基本上大部分主流的非关系型数据库都是免费的。而比较有名气的关系型数据库，比如Oracle、DB2、MSSQL是收费的。虽然Mysql免费，但它需要做很多工作才能正式用于生产。
3.功能。

实际开发中，有很多业务需求，其实并不需要完整的关系型数据库功能，非关系型数据库的功能就足够使用了。这种情况下，使用性能更高、成本更低的非关系型数据库当然是更明智的选择。

非关系型数据库的优势：
1. 性能
NOSQL是基于键值对的，可以想象成表中的主键和值的对应关系，而且不需要经过SQL层的解析，所以性能非常高。
2. 可扩展性
同样也是因为基于键值对，数据之间没有耦合性，所以非常容易水平扩展。

关系型数据库的优势：
1. 复杂查询
可以用SQL语句方便的在一个表以及多个表之间做非常复杂的数据查询。
2. 事务支持
使得对于安全性能很高的数据访问要求得以实现。

对于这两类数据库，对方的优势就是自己的弱势，反之亦然。

但是近年来这两种数据库都在向着另外一个方向进化。例如：

NOSQL数据库慢慢开始具备SQL数据库的一些复杂查询功能的雏形，比如Couchbase的index以及MONGO的复杂查询。对于事务的支持也可以用一些系统级的原子操作来实现例如乐观锁之类的方法来曲线救国。

SQL数据库也开始慢慢进化，比如HandlerSocker技术的实现，可以在MYSQL上实现对于SQL层的穿透，用NOSQL的方式访问数据库，性能可以上可以达到甚至超越NOSQL数据库。可扩展性上例如Percona
Server，可以实现无中心化的集群。

虽然这两极都因为各自的弱势而开始进化出另一极的一些特性，但是这些特性的增加也会消弱其本来具备的优势，比如Couchbase上的index的增加会逐步降低数据库的读写性能。所以怎样构建系统的短期和长期存储策略，用好他们各自的强项是架构师需要好好考虑的重要问题。

热门工具换一换