Web 浏览器中的 SQL 数据库存储 Javascript/HTML5

Posted 2023-03-23

【中文标题】Web 浏览器中的 SQL 数据库存储 Javascript/HTML5

【英文标题】：SQL Database storage in web browser Javascript/HTML5

【发布时间】：2011-10-25 14:38:45

【问题描述】：

在运行时创建的 SQLite 数据库中执行查询后显示结果时出现问题。

这是我的代码

创建数据库

var mydb=false;

// initialise the database
initDB = function() 
  try  
    if (!window.openDatabase)  
      alert('not supported'); 
     else  
      var shortName = 'APP_DB'; 
      var version = '0.1'; 
      var displayName = 'It Happened Today DB'; 
      var maxSize = 262144; // in bytes, 256kb 
      mydb = openDatabase(shortName, version, displayName, maxSize); 
     
   catch(e)  
    // Error handling code goes here. 
    if (e == INVALID_STATE_ERR)  
      // Version number mismatch. 
      alert("Invalid database version."); 
     else  
      alert("Unknown error "+e+"."); 
     
    return; 
   


 // db error handler - prevents the rest of the transaction going ahead on failure
errorHandler = function (transaction, error)  
  // returns true to rollback the transaction
  return true;  
 

// null db data handler
nullDataHandler = function (transaction, results)   

创建表并插入值

 // create tables for the database
createTables = function() 

  try 
   mydb.transaction(
      function(transaction) 
        transaction.executeSql('CREATE TABLE milestones (ID INT( 10 ) NOT NULL, Title    VARCHAR( 50 )    DEFAULT NULL, mYear    INT( 11 )        NOT NULL, mMonth   INT( 11 )        DEFAULT NULL,  mDay     VARCHAR( 10 )    DEFAULT NULL, mText    VARCHAR( 2000 )  NOT NULL,  Theme1   VARCHAR( 50 )    DEFAULT NULL, Theme2   VARCHAR( 50 )    DEFAULT NULL, ImageURL VARCHAR( 50 )    DEFAULT NULL, PRIMARY KEY ( ID ));', [], nullDataHandler, errorHandler); 
        transaction.executeSql('INSERT INTO [milestones] ([ID], [Title], [mYear], [mMonth], [mDay], [mText], [Theme1], [Theme2], [ImageURL]) VALUES (2, "Cotton Mather", 1721, 6, 26, "Following the recommendation of Rev. Cotton Mather, Dr. Zabdiel Boylston of Boston completes the first inoculation against smallpox in the U.S., injecting his own son and two of his slaves.", "HIAm", null, "6-26 Cotton Mather3g04597v.jpg");', [], nullDataHandler, errorHandler); 
        transaction.executeSql('INSERT INTO [milestones] ([ID], [Title], [mYear], [mMonth], [mDay], [mText], [Theme1], [Theme2], [ImageURL]) VALUES (6, "New York Hospital", 1771, 6, 13, "New York Hospital, the second in the colonies after the Pennsylvania Hospital, receives a royal charter from King George III under the name Society of the Hospital in the City of New York in America, later changed to Society of New York Hospital.", "HIAm", null, "Default.png");', [], nullDataHandler, errorHandler); 
        );

   catch(e) 
    /// alert(e.message);
    return;
  
;

TEXT2html

milestonesDataHandler = function(transaction, results)
    var html = "";
    for(var i=0; i < results.rows.length; i++)
        var row = results.rows.item(i);
        html += '<li class="elist"> \
        <a href="article.template.html?id=">'+row['id']+'data-transition="none"> \
            <img src="img/">'+row['ImageURL']+'"   /> \
            <h4>'+row['Title']+'</h4> \
            <p>'+ dateFormat($row['mYear']+' '+$row['mMonth']+' '+$row['mDay'])+'</p> \
        </a> \
        </li>';
    

执行查询

loadMilestones = function()
try 
    mydb.transaction(
        function(transaction)
            transaction.executeSql("SELECT * FROM milestones", [], milestonesDataHandler, errorHandler);
         );

 catch(e) 
    alert(e.message);
  

在 HTML 文档的最后：

<script>$("div.miles").html(milestonesDataHandler);</script>

什么都没有显示。当我转到 Chrome 调试器时，它说：131 Uncaught TypeError: Cannot read property 'length' for undefined。

这是指 TEXT2HTML 部分的第 3 行。看起来由于某种原因，结果变量没有被填充。

请你帮我解决这个问题。

谢谢

【问题讨论】：

您不需要拨打loadMilestones 而不是milestonesDataHandler 吗？

无Manuel，查询结果使用SQL语句回调处理。在此处查看规格w3.org/TR/offline-webapps

【参考方案1】：

createTables 没有被调用，因此在调用milestonesDataHandler 之前没有创建表或填充任何要显示的结果。