解析HTML5的存储功能和web SQL的相关操作方法

2020-04-25 07:58:59易采站长站整理

});  

创建条目时还可以传递如下所示的动态值:

JavaScript Code复制内容到剪贴板

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);   
db.transaction(function (tx) {     
  tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);   
  tx.executeSql(‘INSERT INTO LOGS   
                        (id,log) VALUES (?, ?’), [e_id, e_log];   
});  

这里的 e_id 和 e_log 是外部变量,executeSql 会映射数组参数中的每个条目给 "?"。

读取操作
要读取已经存在的记录,我们可以使用回调来捕获结果,如下所示:

JavaScript Code复制内容到剪贴板

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);   
db.transaction(function (tx) {   
   tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);   
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, "foobar")’);   
   tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")’);   
});   
db.transaction(function (tx) {   
   tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {   
   var len = results.rows.length, i;   
   msg = "<p>Found rows: " + len + "</p>";   
   document.querySelector(‘#status’).innerHTML +=  msg;   
   for (i = 0; i < len; i++){   
      alert(results.rows.item(i).log );   
   }   
 }, null);   
});  

最终示例
最后,然我们把这个例子放到如下所示的完整 HTML5 文档中,然后尝试在 Safari 浏览器中运行它:

JavaScript Code复制内容到剪贴板

<!DOCTYPE HTML>   
<html>   
<head>   
<script type="text/javascript">