一 websql 部分

1.1 websql简介

• WebSQL是客户浏览器端的结构化的关系数据库。这是浏览器内部的本地RDBMS，你可以在这个本地RDBMS上执行SQL查询。
  
  
  

1.2 websql database 的用途

1.3 核心方法

核心方法
以下是规范中定义的三个核心方法：

1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
3. executeSql：这个方法用于执行实际的 SQL 查询。

1.4 创建数据库

var db=openDatabase('person',1,'person',0)
#第一个参数数据库名，第二个参数数据库版本号，第三个描述，第四个估计大小(无论输入多少，最终都是5M)，四个参数都必须输入，但是最后一个参数可以输入null

1.5 创建表

db.transaction(tx=>{
tx.executeSql('create table if not exists student (id unique,name)')
})
# 或
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

1.6 增加数据

db.transaction(tx=>{                                             
         tx.executeSql('insert into student(id,name) values(?,?)',[1,"张三"]);        
         tx.executeSql('insert into student(id,name) values(?,?)',[2,"李四"]);       
     })
#或者
db.transaction(function (tx) {
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
}); 

1.7 删除数据

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

动态删除[删除指定的数据id也可以是动态的]

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

1.8 更新数据

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

id设置为动态

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

1.9 控制台输出

db.transaction(tx=>{
	tx.executeSql("select * from student",[],(tx,res)=>{
	let rows = res.rows;
	let len = rows.length
	for(var i=0;i<length;i++) {
			console.log(rows.item(i))
		}
	})
})

1.10 小结

二 indexedDB部分

1.1 简介

官方：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

• 通俗来说：IndexedDB主要用来客户端存储大量数据而生的，我们都知道cookie、localstorage等存储方式都有存储大小限制。如果数据量很大，且都需要客户端存储时，那么就可以使用IndexedDB数据库。

2.2 特点

特点	详解
非关系型数据库	以键值对存储数据
持久化存储	需要手动清除
异步操作	IndexedDB操作时不会锁死浏览器，用户依然可以进行其他的操作。
支持事务	IndexedDB支持事务(transaction)，这意味着一系列的操作步骤之中，只要有一步失败了，整个事务都会取消，数据库回滚的事务发生之前的状态，这和MySQL等数据库的事务类似。
同源策略	IndexedDB同样存在同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
存储容量大	IndexedDB最显著的特点之一

2.3 核心方法

• onsuccess：数据库打开成功或者创建成功后的回调，这里我们将数据库实例返回了出去。
• onerror：数据库打开或创建失败后的回调。
• onupgradeneeded：当数据库版本有变化的时候会执行该函数，比如我们想创建新的存储库（表），就可以在该函数里面操作，更新数据库版本即可。

2.4 创建数据库

var request = windows.indexedDB.open('db',1);
var db;
request.onsuccess = function(event) {
	db=request.result;
	console.log('数据库打开成功');
};
request.onerror = function (event) {
    console.log("数据库打开失败");
  };
	request.onupgradeneeded= function(event) {
		db= event.target.result;
		var objectStore;
		if(!db.objectStoreName.contains('person')) {
			objectSore= db.createObjectStore('person',{keyPath:'id'});
		}
		console.log('person created');
	}
	

• onupgradeneeded只在创建的时候触发，是唯一能声明表结构的地方。
• createObjectStore方法只能在这个回调中使用

2.5 添加数据

db.transaction(['person'],'readwrite')// 事务对象 指定表格名称和操作模式（"只读"或"读写"）
  .objectStore('person')// 仓库对象
  .add({id:1,name:'haha',age:23})

2.6 修改数据

db.transaction(['person'],'readwrite')// 事务对象
  .objectStore('person')              // 仓库对象
  .put({id:2,name:'ha',age:23})
  db.onsuccess = function () {
    console.log("数据更新成功");
  };
   request.onsuccess = function () {
    console.log("数据更新成功");
  };

  db.onerror = function () {
    console.log("数据更新失败");
  };

2.7 删除数据【该种删除只能删除一条数据，必须传入主键】

db.transaction(['person'],'readwrite')// 事务对象
  .objectStore('person')              // 仓库对象
  .delete(1)//主键id
  db.onsuccess = function () {
    console.log("数据删除成功");
  };

  db.onerror = function () {
    console.log("数据删除失败");
  };

2.8 查询数据

var request2=db.transaction(['person','readwrite'])
			   .objectStore('person')
			   .get(1);//主键id是1

2.9小结

三 大对比

3.1 前端数据库简单对比总结

	会话期Cookie	持久性Cookie	sessionStorage	localstorage	indexedDB	WebSQL
存储大小	4kb	4kb	2.5~10MB	2.5~10MB	>250MB	已废弃
失效时间	浏览器关闭自动清除	设置过期时间，到期后清除	浏览器关闭后清除	永久保存(除非手动清除)	手动更新	已废弃
与服务端交互	有	有	无	无	无	已废弃
访问策略	符合同源可以访问	符合同源可以访问	符合同源可以访问	即使同源也不可访问	符合同源可以访问	已废弃