如何设置chrome可以调用sqlite

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置chrome可以调用sqlite相关的知识，希望对你有一定的参考价值。

通过html5的方式就可以，下面是示例代码：
用HTML5
API来操作本地SQLite数据库的例子：
HTML代码：
1. <!DOCTYPE
html>
2. <head>
3. <meta
charset="UTF-8">
4. <title>使用HTML5本地数据库DEMO</title>
5. <script type="text/javascript"
src="js/operateDB.js"></</script>
6. </head>
7.
8. <body
onload="init();">
9. <h1>使用HTML5本地数据库DEMO</h1>
10. <table>
11.
<tr><td>姓名：</td><td><input
type="text"
id="name"></td></tr>
12.
<tr><td>资料：</td><td><input
type="text"
id="info"></td></tr>
13.
<tr>
14.
<td></td>
15.
<td><input
type="button" value="保存"
onclick="saveData();"></td>
16.
</tr>
17. </table>
18. <hr>
19. <table id="datatable"
border="1"></table>
20. <p
id="msg"></p>
21. </body>
javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。
1.
5.
6. //这个是下方的表格元素
7. var datatable = null;
8.
9. //创建一个数据库对象
10. //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
11. var db = openDatabase(\'MyData\',\'\',\'My
Database\',102400);
12.
13. //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录
14. function init()
15.
//取得下方的表格元素，并且赋值给全局变量
16.
datatable = document.getElementByIdx_x("datatable");
17.
18.
//显示所有已经在数据库中存储的记录
19.
showAllData();
20.
21.
22.
//removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）
23. function removeAllData()
24.
//首先，它将<table>下面的所有子元素全部清除
25.
//所以，这里它对于datatable组件进行遍历
26.
for(var
i=datatable.childNodes.length-1;i>=0;i--)
27.
datatable.removeChild(datatable.childNodes(i));
28.

29.
30.
//全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>
31.
//创建表头行到文档树中
32.
var tr= document_createElement_x(\'tr\');
33.
//表头行的第一个表头
34.
var th1=document_createElement_x(\'th\');
35.
//表头行的第二个表头
36.
var th2=document_createElement_x(\'th\');
37.
//表头行的第三个表头
38.
var th3=document_createElement_x(\'th\');
39.
//设置这3个表头的文本
40.
th1.innerHTML="姓名";
41.
th2.innerHTML="资料";
42.
th3.innerHTML="时间";
43.
//将这些表头依次放在表头行中
44.
tr.a(th1);
45.
tr.a(th2);
46.
tr.a(th3);
47.
//将这个新创建的表头行挂到表格中
48.
datatable.a(tr);
49.
50.
51.
//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
52. function showData(row)
53.
//构建一个表行用于取得当前所要的信息
54.
var tr= document_createElement_x(\'tr\');
55.
//创建第一列，这一列是姓名
56.
var td1=document_createElement_x(\'td\');
57.
//填充第一列的信息为该行的name
58.
td1.innerHTML=row.name;
59.
//创建第二列，这一列是留言
60.
var td2=document_createElement_x(\'td\');
61.
//填充第一列的信息为该行的message
62.
td2.innerHTML=row.info;
63.
//创建第三列，这一列是日期
64.
var td3=document_createElement_x(\'td\');
65.
//创建一个日期对象
66.
var t = new Date();
67.
t.setTime(row.time);
68.
//将日期的标准形式和国际化日期形式分别设置给当前列
69.
td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
70.
//吧这三列挂到当前行中
71.
tr.a(td1);
72.
tr.a(td2);
73.
tr.a(td3);
74.
//让这个表格在后面加上这一行
75.
datatable.a(tr);
76.
77.
78. //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的
79. function showAllData()
80.
//开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
81.
db.transaction(function(tx)
82.
//首先它创建一个数据库表，里面有3个字段
83.
tx.executeSql(\'CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info
TEXT,time INTEGER)\',[]);
84.
//创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）
85.
//然后定义了一个回调函数，表明对于结果集的处理
86.
tx.executeSql(\'SELECT * FROM InfoData\',[],function(tx,rs)
87.
88.
//对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
89.
removeAllData();
90.
//遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本
91.
for(var i=0;i<rs.rows.length;i++)
92.
//对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
93.
showData(rs.rows.item(i));
94.

95.
);
96.

97.
98.
);
99.
100.
101.
//这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
102. function addData(name,info,time)
103.
//开启一个数据库事务
104.
//回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
105.
db.transaction(function(tx)
106.
107.
//插入的语句是个模板语句
108.
//插入成功的回调就是在控制台上输入一行日志
109.
tx.executeSql(\'INSERT INTO InfoData VALUES(?,?,?)\' ,
[name,info,time],function(tx,rs)
110.
console.log("成功保存数据!");
111.
,
112.
//插入失败的回调就是在控制台上输入一行错误日志
113.
function(tx,error)
114.
console.log(error.source+"::"+error.message);
115.
);
116.

117.
118.
);
119.
120.
121. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
122. function saveData()
123.
//从HTML页面中取得2个输入框的文本
124.
var name=document.getElementByIdx_x(\'name\').value;
125.
var info=document.getElementByIdx_x(\'info\').value;
126.
//得到当前的系统时间 www.2cto.com
127.
var time= new Date().getTime();
128.
//将用户名，用户信息，当前时间存到数据库中
129.
addData(name,info,time);
130.
//更新下方<p id="msg">的表格显示
131.
showAllData();
132. 参考技术A 通过HTML5的方式就可以，下面是示例代码：
用HTML5
API来操作本地SQLite数据库的例子：
HTML代码：
1. <!DOCTYPE
html>
2. <head>
3. <meta
charset="UTF-8">
4. <title>使用HTML5本地数据库DEMO</title>
5. <script type="text/javascript"
src="js/operateDB.js"></</script>
6. </head>
7.
8. <body
onload="init();">
9. <h1>使用HTML5本地数据库DEMO</h1>
10. <table>
11.
<tr><td>姓名：</td><td><input
type="text"
id="name"></td></tr>
12.
<tr><td>资料：</td><td><input
type="text"
id="info"></td></tr>
13.
<tr>
14.
<td></td>
15.
<td><input
type="button" value="保存"
onclick="saveData();"></td>
16.
</tr>
17. </table>
18. <hr>
19. <table id="datatable"
border="1"></table>
20. <p
id="msg"></p>
21. </body>
javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。
1.
5.
6. //这个是下方的表格元素
7. var datatable = null;
8.
9. //创建一个数据库对象
10. //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
11. var db = openDatabase('MyData','','My
Database',102400);
12.
13. //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录
14. function init()
15.
//取得下方的表格元素，并且赋值给全局变量
16.
datatable = document.getElementByIdx_x("datatable");
17.
18.
//显示所有已经在数据库中存储的记录
19.
showAllData();
20.
21.
22.
//removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）
23. function removeAllData()
24.
//首先，它将<table>下面的所有子元素全部清除
25.
//所以，这里它对于datatable组件进行遍历
26.
for(var
i=datatable.childNodes.length-1;i>=0;i--)
27.
datatable.removeChild(datatable.childNodes(i));
28.

29.
30.
//全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>
31.
//创建表头行到文档树中
32.
var tr= document_createElement_x('tr');
33.
//表头行的第一个表头
34.
var th1=document_createElement_x('th');
35.
//表头行的第二个表头
36.
var th2=document_createElement_x('th');
37.
//表头行的第三个表头
38.
var th3=document_createElement_x('th');
39.
//设置这3个表头的文本
40.
th1.innerHTML="姓名";
41.
th2.innerHTML="资料";
42.
th3.innerHTML="时间";
43.
//将这些表头依次放在表头行中
44.
tr.a(th1);
45.
tr.a(th2);
46.
tr.a(th3);
47.
//将这个新创建的表头行挂到表格中
48.
datatable.a(tr);
49.
50.
51.
//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
52. function showData(row)
53.
//构建一个表行用于取得当前所要的信息
54.
var tr= document_createElement_x('tr');
55.
//创建第一列，这一列是姓名
56.
var td1=document_createElement_x('td');
57.
//填充第一列的信息为该行的name
58.
td1.innerHTML=row.name;
59.
//创建第二列，这一列是留言
60.
var td2=document_createElement_x('td');
61.
//填充第一列的信息为该行的message
62.
td2.innerHTML=row.info;
63.
//创建第三列，这一列是日期
64.
var td3=document_createElement_x('td');
65.
//创建一个日期对象
66.
var t = new Date();
67.
t.setTime(row.time);
68.
//将日期的标准形式和国际化日期形式分别设置给当前列
69.
td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
70.
//吧这三列挂到当前行中
71.
tr.a(td1);
72.
tr.a(td2);
73.
tr.a(td3);
74.
//让这个表格在后面加上这一行
75.
datatable.a(tr);
76.
77.
78. //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的
79. function showAllData()
80.
//开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
81.
db.transaction(function(tx)
82.
//首先它创建一个数据库表，里面有3个字段
83.
tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info
TEXT,time INTEGER)',[]);
84.
//创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）
85.
//然后定义了一个回调函数，表明对于结果集的处理
86.
tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs)
87.
88.
//对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
89.
removeAllData();
90.
//遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本
91.
for(var i=0;i<rs.rows.length;i++)
92.
//对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
93.
showData(rs.rows.item(i));
94.

95.
);
96.

97.
98.
);
99.
100.
101.
//这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
102. function addData(name,info,time)
103.
//开启一个数据库事务
104.
//回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
105.
db.transaction(function(tx)
106.
107.
//插入的语句是个模板语句
108.
//插入成功的回调就是在控制台上输入一行日志
109.
tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' ,
[name,info,time],function(tx,rs)
110.
console.log("成功保存数据!");
111.
,
112.
//插入失败的回调就是在控制台上输入一行错误日志
113.
function(tx,error)
114.
console.log(error.source+"::"+error.message);
115.
);
116.

117.
118.
);
119.
120.
121. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
122. function saveData()
123.
//从HTML页面中取得2个输入框的文本
124.
var name=document.getElementByIdx_x('name').value;
125.
var info=document.getElementByIdx_x('info').value;
126.
//得到当前的系统时间 www.2cto.com
127.
var time= new Date().getTime();
128.
//将用户名，用户信息，当前时间存到数据库中
129.
addData(name,info,time);
130.
//更新下方<p id="msg">的表格显示
131.
showAllData();
132. 参考技术B 通过HTML5的方式就可以，下面是示例代码：
用HTML5
API来操作本地SQLite数据库的例子：
HTML代码：
1. <!DOCTYPE
html>
2. <head>
3. <meta
charset="UTF-8">
4. <title>使用HTML5本地数据库DEMO</title>
5. <script type="text/javascript"
src="js/operateDB.js"></</script>
6. </head>
7.
8. <body
onload="init();">
9. <h1>使用HTML5本地数据库DEMO</h1>
10. <table>
11.
<tr><td>姓名：</td><td><input
type="text"
id="name"></td></tr>
12.
<tr><td>资料：</td><td><input
type="text"
id="info"></td></tr>
13.
<tr>
14.
<td></td>
15.
<td><input
type="button" value="保存"
onclick="saveData();"></td>
16.
</tr>
17. </table>
18. <hr>
19. <table id="datatable"
border="1"></table>
20. <p
id="msg"></p>
21. </body>
javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。
1.
5.
6. //这个是下方的表格元素
7. var datatable = null;
8.
9. //创建一个数据库对象
10. //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
11. var db = openDatabase('MyData','','My
Database',102400);
12.
13. //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录
14. function init()
15.
//取得下方的表格元素，并且赋值给全局变量
16.
datatable = document.getElementByIdx_x("datatable");
17.
18.
//显示所有已经在数据库中存储的记录
19.
showAllData();
20.
21.
22.
//removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）
23. function removeAllData()
24.
//首先，它将<table>下面的所有子元素全部清除
25.
//所以，这里它对于datatable组件进行遍历
26.
for(var
i=datatable.childNodes.length-1;i>=0;i--)
27.
datatable.removeChild(datatable.childNodes(i));
28.

29.
30.
//全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>
31.
//创建表头行到文档树中
32.
var tr= document_createElement_x('tr');
33.
//表头行的第一个表头
34.
var th1=document_createElement_x('th');
35.
//表头行的第二个表头
36.
var th2=document_createElement_x('th');
37.
//表头行的第三个表头
38.
var th3=document_createElement_x('th');
39.
//设置这3个表头的文本
40.
th1.innerHTML="姓名";
41.
th2.innerHTML="资料";
42.
th3.innerHTML="时间";
43.
//将这些表头依次放在表头行中
44.
tr.a(th1);
45.
tr.a(th2);
46.
tr.a(th3);
47.
//将这个新创建的表头行挂到表格中
48.
datatable.a(tr);
49.
50.
51.
//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
52. function showData(row)
53.
//构建一个表行用于取得当前所要的信息
54.
var tr= document_createElement_x('tr');
55.
//创建第一列，这一列是姓名
56.
var td1=document_createElement_x('td');
57.
//填充第一列的信息为该行的name
58.
td1.innerHTML=row.name;
59.
//创建第二列，这一列是留言
60.
var td2=document_createElement_x('td');
61.
//填充第一列的信息为该行的message
62.
td2.innerHTML=row.info;
63.
//创建第三列，这一列是日期
64.
var td3=document_createElement_x('td');
65.
//创建一个日期对象
66.
var t = new Date();
67.
t.setTime(row.time);
68.
//将日期的标准形式和国际化日期形式分别设置给当前列
69.
td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
70.
//吧这三列挂到当前行中
71.
tr.a(td1);
72.
tr.a(td2);
73.
tr.a(td3);
74.
//让这个表格在后面加上这一行
75.
datatable.a(tr);
76.
77.
78. //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的
79. function showAllData()
80.
//开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
81.
db.transaction(function(tx)
82.
//首先它创建一个数据库表，里面有3个字段
83.
tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info
TEXT,time INTEGER)',[]);
84.
//创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）
85.
//然后定义了一个回调函数，表明对于结果集的处理
86.
tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs)
87.
88.
//对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
89.
removeAllData();
90.
//遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本
91.
for(var i=0;i<rs.rows.length;i++)
92.
//对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
93.
showData(rs.rows.item(i));
94.

95.
);
96.

97.
98.
);
99.
100.
101.
//这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
102. function addData(name,info,time)
103.
//开启一个数据库事务
104.
//回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容
105.
db.transaction(function(tx)
106.
107.
//插入的语句是个模板语句
108.
//插入成功的回调就是在控制台上输入一行日志
109.
tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' ,
[name,info,time],function(tx,rs)
110.
console.log("成功保存数据!");
111.
,
112.
//插入失败的回调就是在控制台上输入一行错误日志
113.
function(tx,error)
114.
console.log(error.source+"::"+error.message);
115.
);
116.

117.
118.
);
119.
120.
121. //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
122. function saveData()
123.
//从HTML页面中取得2个输入框的文本
124.
var name=document.getElementByIdx_x('name').value;
125.
var info=document.getElementByIdx_x('info').value;
126.
//得到当前的系统时间 www.2cto.com
127.
var time= new Date().getTime();
128.
//将用户名，用户信息，当前时间存到数据库中
129.
addData(name,info,time);
130.
//更新下方<p id="msg">的表格显示
131.
showAllData();
132.

如何在我的 Chrome / Firefox 浏览器中查看 SQLite 数据库？

【中文标题】如何在我的 Chrome / Firefox 浏览器中查看 SQLite 数据库？【英文标题】：How To See SQLite Database in my Chrome / Firefox Browser? 【发布时间】：2019-05-19 14:25:22 【问题描述】：

我在我的 Android 应用程序中使用 SQLite 数据库。我想在我的 chrome 或 Firefox 浏览器中查看数据库。

要查看数据库，通常我在 android Studio 中打开 Logcat 并选择详细并在 serach 框中写入 http 然后它为我提供了一个在我的浏览器中打开数据库的链接

点赞：D/DebugDB：在浏览器中打开http://192.168.2.116:8083

但在我的新项目中，它没有显示链接。我该怎么办？

【问题讨论】：

有人知道吗？ 使用 stetho 库。 为此你必须在firefox浏览器中安装firefox sqlite manager插件并在其中打开你的android db文件。 参考这个链接：c-sharpcorner.com/UploadFile/e14021/… @Android 团队谢谢，我已经检查过了，但问题是没有可用的数据库文件。通常我打开 logcat 然后选择详细然后在搜索框中写入 http 然后它会为我提供一个在我的浏览器中打开数据库的链接，但它在我的新项目中不起作用，你知道吗？ 【参考方案1】：

有多个库可以实现这一点

    Android-Debug-Database stetho

请参阅链接以在您的应用中进行初始化

【讨论】：

非常感谢，这正是我正在寻找的答案。 欢迎，请为我的问题投票，因为我被禁止提出更多问题，而且我不明白为什么我的问题不相关。 @Basi【参考方案2】：

您需要使用 Stetho 库，它将通过您的浏览器向您显示您的数据库。您也可以跟踪网络请求。在这里看到这个 -> Stetho

【讨论】：

@JayDanger 感谢不是我正在寻找的答案，但这也有帮助。它正在工作。 这不是你的答案吗？我的意思是除了看到你的sqlite db之外你想要什么？这甚至可以无线工作。 是的，我说这也有帮助。它对我有用。我想看到像“Basi”这样的回答，但谢谢这也很好。 高兴@JayDangar 请投赞成票，因为我被禁止提出新问题，而且我不明白我的问题与@Jay 无关【参考方案3】：

你可以从

获取数据库 
View -> Tools Window -> Device File Explorer

保存...

Install this and open the file

【讨论】：

谢谢，我检查了但没有数据库文件适合我。我应该设置位置还是默认设置？ 不需要。你确定数据库已经创建了吗？ @DVK 是的，我正在获取列表中的记录并且所有记录都可用，我想在我的 chrome/firefox 浏览器中查看它。通常我打开 logcat 然后选择详细然后在搜索框中写入 http 然后它将为我提供一个在浏览器中打开数据库的链接，但它在我的新项目中不起作用，你知道吗？ 我一般都是按上面的方法做的。

以上是关于如何设置chrome可以调用sqlite的主要内容，如果未能解决你的问题，请参考以下文章

如何修改chrome代理服务器

Winform里添加SqliteSqlite数据库引用的步骤

如何在 chrome 中覆盖或设置 console.log 的文件引用

如何让ie调用chrome内核

如何在 Google Chrome 中检查 XMPP 调用

如何chrome打开新窗口就最大化？