浅谈WebView利用localStore websql和IndexDB 来存储数据

最新推荐文章于 2023-04-28 10:32:18 发布

氵青-风

最新推荐文章于 2023-04-28 10:32:18 发布

阅读量1.1w

点赞数 8

分类专栏： webapp android 文章标签： web app 数据库存储 websql android

本文链接：https://blog.csdn.net/wjb820728252/article/details/71246522

版权

android 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

webapp

2 篇文章 0 订阅

订阅专栏

最近做一个webapp，需要将webview的数据存储到本地数据库，鉴于Android和webview传递大量数据比较麻烦，所以干脆直接存储在webview内置的本地数据库算了。
LocalStore
没有时间限制的本地存储，是上面三种存储方式中浏览器默认存储的容量最小的，也是最容易使用的，直接一句话完成存储过程。
存储数据：

localStorage.XXX=YYY

XXX可以随便命名，YYY是要存储的数据，可以是任何数据类型。
例如：

localStorage.status=true

localstore适合做少量数据的存储，一般用来存储网站某个变量的状态之类的

清除数据，有两种方式：
1) 删除一条数据

localStorage.removeItem(“key”);

Key对应上面的XXX
2)批量删除数据

localStorage.clear();

在浏览器可以看到其存储的数据，例如Google Chrome：
按F12查看开发者工具，然后点击上面的Application
这里写图片描述
重点来了，localStore在webview怎么用不了！！
原因是webView默认没有启动localStore功能的服务，需要我们自己手动去开启服务：

WebSettings settings = webview.getSettings();
settings.setDomStorageEnabled(true);

localStore用法比较简单，就介绍到这里，下面讨论一下websql的使用：

Websql
是当前最多浏览器支持的本地数据库，可以说目前主流的浏览器都支持了，手机的WebView 也不例外（WebView使用Websql也需要开启服务，这点我们下面再说）。
Websql是一个轻量级的本地数据库，存储量达到几百万条数据以上，使用起来也是相当简单的，支持原生的sql语句（SELECT、INSERT、DELETE、UPDATE），下面简单介绍用法：

1)、打开websql数据库用函数openDatabase();

db = openDatabase(“数据库名”, "版本号", "数据库的描述信息", 数据库的大小);

一个完整的例子：

var db = null;
try {
    if (window.openDatabase) {
        db = openDatabase(“myDB”, "1.0", "Database example", 10*1024*1024);
} catch(err) {
    db = null;
    alert("打开数据库失败");
}

2)、创建表(注意，一切对表的操作都要使用事务)，并且使用executeSql 函数

//executeSql函数有四个参数(第一个参数必填，后三个可以不写)，函数原型如下：
void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);

参数意义分别：
sqlStatement：是原生的sql语句。

例如：CREATE TABLE test (id, name)

ObjectArray：上一句sql语句中的占位符“？”所对应的参数，空则写“[]”

例如：select name from student where id=?,[001]

callback：本次sql操作成功后的回调接口，数据会被返回
errorCallback：本次sql操作失败后的回调接口，失败信息会被返回

创建一张test表：

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE test (id, name)');
});

3)、插入（INSERT）操作

db.transaction(function (tx){
     tx.executeSql("INSERT INTO test (id, name) VALUES ( ?, ?)", [001, “Biao”]);
});

4)、查询（SELECT）操作

db.transaction(function(tx) {
        tx.executeSql("SELECT * FROM test ", [], function(tx, result) {
           // result就是查询到的结果
        }, function(tx, error) {
            alert('查询失败 ' + error.message);
            return;
        });
});

5)、更新(UPDATE)操作

db.transaction(function (tx){
    tx.executeSql("UPDATE test SET name = ? WHERE id = ?", [“wu”, 001]);
});

6)、删除(DELETE)操作

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

表创建成功之后同样也可以在web浏览器的开发者工具上看到数据（例如：谷歌浏览器）

这里写图片描述

以上就是Websql的四个主要操作了。

那么问题又来了，怎么Android Webview用不了Websql呢？

这里写图片描述

刚才已经说了，Websql是目前浏览器支持最为广泛的一个内置的本地数据库，没有之一，并且Android的Webview也已经支持了，但是，Webview默认是没有开启这个服务的，还是得我们自己开启，操作步骤如下：

WebSettings settings = webview.getSettings();
//设置与Js交互的权限
settings.setJavaScriptEnabled(true);
//设置数据库可用
settings.setDatabaseEnabled(true);
String dbPath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(dbPath);

//然后
webview.setWebChromeClient(new MyChromeViewClient());

class MyChromeViewClient extends WebChromeClient {
//重写这个方法就OK 了
@Override
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater){
    //设置数据库存储大小
    quotaUpdater.updateQuota(estimatedSize * 2);
    }
}

现在就可以在Webview上使用websql了

websql对数据的操作尽然不比localStore存储方便，但是这两个是没法比的，Websql存储数据是以一张张表的形式存在，存储量比localStore大多了。而且它对数据的操作还是我们相当熟悉的SQL语句。总而言之，方便好用。

但是！！大家有没有发现，我们再看看对数据的操作，全部得手写原生SQL语句！！SELECT INSERT UPDATE DELETE，当数据表的字段非常多的时候，所有字段都得我们自己去写入。不知道大家会不会觉得烦，反正我是烦了。

幸亏有IndexDB
indexDB 支持本地存储大量对象，并使用健壮的数据访问机制检索数据。插入数据支持直接使用JSON数据，关键的是它不需要我们手写原生SQL语句来对数据进行查增删改。

下面简单介绍其用法
创建或者打开数据库

window.indexedDB.open(dbName, 1);

参数意义：
dbName:数据库的名称
1：版本号

1)、创建表

db.createObjectStore(tbName,{"keyPath":"keyID", autoIncrement:true});

参数意义：
tbName：表名称
{“keyPath”:”keyID”, autoIncrement:true}：设置字段keyid为主键，并且设置自动自增属性
可以添加字段，例如，添加name 字段
objectStore.createIndex(“name”, “name”,{unique:false});
参数意义：
“name”：字段名
“name”：设置字段name为索引，设置为索引后在查询的时候可以以name字段进行查询，加快查询速度。
{unique:false}：设置属性：不唯一。换句话说就是可以存在相同名字的数据

2)、插入数据(INSERT):

INDEXDB 和 WebSQL一样，对数据处理的时候要使用到事务

//获取事务
var transaction = database.transaction([tableName], model);
//参数意义：
//tableName：要操作的表名
//model：模式，有两种，readwrite（可读可写） 和readonly（只读）

//获取表
var objectStore = transaction.objectStore(tableName);

var request = objectStore.put(date);
request.onerror = function(event) {
     alert("发生错误：" + request.error);
};
request.onsuccess = function(event) {
     alert("数据保存成功");
};

大家可以看到，上面没有出现字段名就完成对数据的插入了，上面的date是一个JS对象，只要把数据转换为JS对象数据就可以利用函数objectStore.put(date);插入数据了，其实也可以利用函数objectStore.add(date);插入数据。
如果是JSON 数据可以利用$.parseJSON(data)来将JSON数据转成JS对象，然后对数据进行插入操作
这里写图片描述

put和add方法的区别在于，put插入数据的话

如果主键存在表中，那么就把旧数据更新
如果主键不存在表中，就插入一条新的数据。

add插入数据的话

如果主键存在表中，那么就会报错
如果主键不存在表中，就插入一条新的数据。

3)、查询数据(SELECT):

3.1)获取一条数据用函数get(key);

var transaction = database.transaction([tableName], model);
var objectStore = transaction.objectStore(tableName);
//key是主键的某一个值
var request = objectStore.get(key);
request.onerror=function(e){
    alert("发生错误：" + request.error);
};
request.onsuccess=function(e){
    var result=e.target.result;
    console.log("获取数据成功");
}

3.2)获取所有数据用函数getAll();

var transaction = database.transaction([tableName], model);
var objectStore = transaction.objectStore(tableName);
var request = objectStore.getAll();
request.onerror=function(e){
    alert("发生错误：" + request.error);
};
request.onsuccess=function(e){
    var result=e.target.result;
    console.log("获取数据成功");
}

但是getAll()函数不推荐使用，貌似已经废弃了，反正我在平板Android4.4.2的webview上面不能使用。

3.3)推荐使用openCursor()利用游标的方式来进行查询多条数据，功能非常强大，可以利用索引加快查询速度，还可以指定搜索的范围。

var transaction = database.transaction([tableName], model);
var objectStore = transaction.objectStore(tableName);
objectStore.openCursor().onsuccess = function(event) {  
        var cursor = event.target.result;  
        if (cursor) {  
            var rowData = cursor.value;  
            for (var Key in rowData){
                console.log("查询的数据"+Key[0]);          
            }
            cursor.continue();  
            console.log(“1”);  
        }else{
        console.log(“2”);  
    }  
}

cursor.continue(); 表示，查询到了继续向前走，直至查询到所有结果截止。
注意，它和JAVA里面for循环的continue不一样，java的continue不会执行continue以后的语句，但是，cursor.continue();还是会执行以后的代码，例如上面的console.log(“1”);会一直被执行到。

但是！！

console.log(“2”);只会被执行一次，因为当cursor为空的时候，代表语句查询到所有结果了。

3.4)利用索引加快查询速度index(‘name’) name字段必须在一开始添加字段的时候给它设置为索引，如下：

objectStore.createIndex(“name”, “name”,{unique:false});

var transaction = database.transaction([tableName], model);
var objectStore = transaction.objectStore(tableName);
objectStore.index(‘name’).openCursor().onsuccess = function(event) {  
        var cursor = event.target.result;  
        if (cursor) {  
            var rowData = cursor.value;  
            for (var Key in rowData){
                console.log("查询的数据"+Key[0]);          
            }
            cursor.continue();  
            console.log(“1”);  
        }else{
            console.log(“2”);  
    }  
}

3.5) 指定搜索的范围
使用到IDBKeyRange属性

Range           Code
//例如我上面指定主键是id , 意思就是查询id<=X的数据
//All keys ≤ x  IDBKeyRange.upperBound(x)
//查询id<X的数据
//All keys < x  IDBKeyRange.upperBound(x, true)
//查询id>=y的数据
//All keys ≥ y  IDBKeyRange.lowerBound(y)
//查询id>y的数据
//All keys > y  IDBKeyRange.lowerBound(y, true)
//All keys ≥ x && ≤ y   IDBKeyRange.bound(x, y)
//All keys > x &&< y    IDBKeyRange.bound(x, y, true, true)
//All keys > x && ≤ y   IDBKeyRange.bound(x, y, true, false)
//All keys ≥ x &&< y    IDBKeyRange.bound(x, y, false, true)
//查询id==z的数据
//The key = z   IDBKeyRange.only(z)
//查询id<=X的数据
var transaction = database.transaction([tableName], model);
var objectStore = transaction.objectStore(tableName);
objectStore.openCursor(IDBKeyRange.upperBound(x)).onsuccess = function(event) {  
    var cursor = event.target.result;  
        if (cursor) {  
            var rowData = cursor.value;  
            for (var Key in rowData){
                console.log("查询的数据"+Key[0]);          
            }
            cursor.continue();  
            console.log(“1”);  
        }else{
            console.log(“2”);  
    }  
}

3.6）删除数据《2017.7.10 更新》
删除数据，indexDB的操作很简单

/** 
 * 删除数据  
 * 
 */ 
function deleteData(tbName,value){
    var objectStore = initDB(tbName,"readwrite");
    var request=objectStore.delete(IDBKeyRange.only(parseInt(value)));
    request.onerror=function(e){
        alert("发生错误：" + request.error);
    };
    request.onsuccess=function(e){
        var result=e.target.result;
        alert("删除数据成功");
    }
}

注意:用delete()方法，传值一定得是创建表的index索引，否则删除失败，例如

objectStore = db.createObjectStore(personDoc,{"keyPath":"keyID", autoIncrement:true});

上面的代码是指在创建表中指定索引为keyID ,是一个自增值，整型，因此index索引是一个数值，IDBKeyRange.only(parseInt(value))这个就表示只删除索引值为value值的数据。

以上简单介绍了IndexDB的部分用法，总体来说，indexDB的学习成本不高，但其实用性和方便性很强。需要深入学习的朋友可以去MDN(链接)学习。

怎么在Android 的 webview上使用，可以参考websql的设置，他们两个是一样的，当然在浏览器上面也是可以看到indexDB数据库存储的数据的。例如：谷歌浏览器

这里写图片描述

最后贴上一份indexDB 的样例代码

$(function(){
    //全局数据库对象
    var database;
    //数据库的名称
    var dbName='HealDoc';
    //数据表
    var tbName='disease';
    //表字段
    var field="idcard/id/visitDate/visitWay/curSymptom/pressureH/pressureL/avoirdupois/bmi/arteriopalmus/smokeNum/drinkNum/trainingRate/trainingTime/rice/mentality/compiance/lastFbg/hgbde/hgbdedate/subCheck/dependence/sideEffects/effectsState/lowEffects/visitType/drugname/drugperday/drugpertime/drugname2/drugperday2/drugpertime2/drugname3/drugperday3/drugpertime3/insulin/insulinperday/insulinpertime/referralreason/referralagencies/nextDate/inputIdcard";
    //创建数据库
    var request = window.indexedDB.open(dbName, 1);
    request.onsuccess = function(event) {
        //让数据库 可在任何地方访问
        database = request.result;

    };
    request.onerror = function (event) {
        alert("发生错误：" + request.error);
    };
    request.onupgradeneeded = function(event) {
        alert("第一次创建数据库或者更新数据库。");
        db = request.result;  
        //创建表 
        var objectStore = db.createObjectStore(tbName,{"keyPath":"keyID", autoIncrement:true});  
        var fields=new Array();
        fields=field.split("/");
        for (var i = 0; i < fields.length; i++) {
            objectStore.createIndex(fields[i],fields[i],{unique:false});
        }
    }

    //对数据库处理得先初始化数据库
    //参数一：表名
    //参数二：操作数据库的模式 有两种：readwrite 和readonly
    function initDB(tableName,model){
        //获取事务
        var transaction = database.transaction([tableName], model);
        //获取表
        var objectStore = transaction.objectStore(tableName);
        return objectStore;
    }


    function insert(date){
        var objectStore=initDB("disease","readwrite");
        //add 或者put
        var request = objectStore.put(date);
            request.onerror = function(event) {
                alert("发生错误：" + request.error);
            };
            request.onsuccess = function(event) {
                alert("数据保存成功");
            };
    }
    function selectSingle(key){
        var objectStore=initDB("disease","readonly");
        var request=objectStore.get(key);
        request.onerror=function(e){
            alert("发生错误：" + request.error);
        };
        request.onsuccess=function(e){
            var result=e.target.result;
            console.log(result);
        }
    }
    function selectAll(){
        var objectStore = initDB("disease","readonly");
        var response="";
        // 打开游标，遍历customers中所有数据  
        objectStore.openCursor().onsuccess = function(event) {  
            var cursor = event.target.result;  
            if (cursor) {  
                var rowData = cursor.value;  
                for (var Key in rowData){
                    response =response+Key+":"+rowData[Key]+"\n";
                }
                response+="\n\n\n"
                cursor.continue();  
            }  
            $('#output').val(response);
        }  
    }
    $('#submitButton').click(function(){
        var date = {};
        var t = $('#yourformid').serializeArray();
       // var str="";
        $.each(t, function() {
          date[this.name] = this.value;
       // str+=this.name+"/"
        });
         insert(date);
        return false;
    });
    $('#close').click(function(){
        selectAll();
    });
});

最后的最后，小弟不才，只能简述到这里了，如果有错误，请不吝赐教，如果有帮助到您的话，请留下一个start,O(∩_∩)O谢谢！

氵青-风

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
11
评论
浅谈WebView利用localStore websql和IndexDB 来存储数据

最近做一个webapp，需要将webview的数据存储到本地数据库，鉴于Android和webview传递大量数据比较麻烦，所以干脆直接存储在webview内置的本地数据库算了。 LocalStore 没有时间限制的本地存储，是上面三种存储方式中浏览器默认存储的容量最小的，也是最容易使用的，直接一句话完成存储过程。存储数据：localStorage.XXX=YYYXXX可以随便命名，YYY是
复制链接

扫一扫

专栏目录