js浏览器数据库 IndexedDB && Web SQL

一、IndexedDB （建议使用）

1.介绍：

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStor 

age 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

2.IndexedDB 具有以下特点：

        (1).键值对储存 (2).异步 (3).支持事务 (3).同源限制 (5).储存空间大 (6).支持二进制储存

indexedDB 使用的基本使用代码：

// indexedDB使用他的open方法创建一个浏览器数据库
var indB = indexedDB.open('indB', 1)
// 用来存储数据库内的表
var db;
// 数据库打开成功的回调
indB.onsuccess = function (tx) {
    // 如果以前就有这个是数据库的话就将里面的表放到db中
    db = indB.result
    console.log('数据库开启成功');
}
// 第一次打开数据库时调用
indB.onupgradeneeded = function (tx) {
    // 并将里面的表放入到db中
    db = tx.target.result
    // 如果没有person这张表的话那么就创建一个
    if (!db.objectStoreNames.contains('person')) {
        // 规定必须有一个键key
        // autoIncrement:true
        db.createObjectStore('person', { keyPath: 'id' })
    }
}
// 添加 add
function add(value) {
    // transaction开启一个事物
    db.transaction(['person'], 'readwrite')
        // 拿到其中的一张表
        .objectStore('person')
        // 添加的值
        .add(value)
}
// 删除 delete
function del() {
    db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .delete(1)
}
// 编辑 put
function edit() {
    db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .put({ id: 2, name: '张三' })
}
// 查询 get
function get(key) {
    return new Promise((reslove, reject) => {
        var req = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .get(key)
        req.onsuccess = function (res) {
            reslove(res.target.result)
        }
    })
}
//调用 
setTimeout(() => {
    
}, 1000);

二、HTML5 Web SQL 数据库（不建议使用）

介绍：

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

但是由于Web SQL长时间不维护，逐渐的被淘汰掉，导致兼容性不太好，已经很少用到了，因为很少人会为了用Web SQL而去维护，简单的写下不建议使用。

代码：

// web SQl
var db = openDatabase('mongo', 1, '数据库', 0)
console.log(db);
db.transaction(i => {
    i.executeSql('create table if not exists student (id unique,name)')
})
// 添加
db.transaction(i => {
     i.executeSql('insert into student (id,name) values(?,?)', [1, "张三"])
     i.executeSql('insert into student (id,name) values(?,?)', [2, "李四"])
})
// 读取
db.transaction(i=>{
    i.executeSql('select * from student',[],(i,res)=>{
        console.log(res.rows);
    })
})