Question

我正在尝试创建一个非常基本的html5存储功能，我编写了以下代码并且它可以正常工作。

JS：

function initDatabase() {
    try {
    alert("Hi");
        if (!window.openDatabase) {
            alert('Databases are not supported in this browser.');
        } else {
            var shortName = 'SOMEDB';
            var version = '1.0';
            var displayName = 'SOMEDB';
            var maxSize = 10000; //  bytes
            SOMEDB = openDatabase(shortName, version, displayName, maxSize);
            createTables();
            //selectAll();
        }
    } catch(e) {
        if (e == 2) {
            // Version number mismatch.
            console.log("Invalid database version.");
        } else {
            console.log("Unknown error "+e+".");
        }
        return;
    }
}

function createTables(){
alert("Create table");
    SOMEDB.transaction(
        function (transaction) {
            transaction.executeSql('CREATE TABLE IF NOT EXISTS page_settings(id INTEGER NOT NULL PRIMARY KEY, settingname TEXT NOT NULL,value TEXT NOT NULL);', [], nullDataHandler, errorHandler);
        }
    );
    prePopulate();
}

function prePopulate(){
alert("In pre populating");
    SOMEDB.transaction(
        function (transaction) {
        //Optional Starter Data when page is initialized
        var setting1 = ['1','setting1','setting2'];
        transaction.executeSql("INSERT INTO page_settings(id, settingname, value) VALUES ('1', 'bluetooth', 'on');",[],nullDataHandler, errorHandler);
        transaction.executeSql("commit;");
        }
    );
}

function errorHandler(transaction, error){
    if (error.code==1){
        // DB Table already exists
    } else {
        // Error is a human-readable string.
        console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');
    }
    return false;
}


function nullDataHandler(){
    console.log("SQL Query Succeeded");
}

HTML看起来像这样：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="db.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#" onClick="initDatabase();">aa</a>
</body>
</html>

此代码有效。一旦我点击我的html页面上的href，我就可以看到创建的表格，并且值已插入。 但是一旦我关闭浏览器并重新打开它，数据就会消失。

不知何故看起来数据只保存在会话中。我在这里做错了什么？

我在这个位置上传了类似的代码。有人可以尝试这个，让我知道这是否适用于任何人。对我来说同样的问题，数据被保存。我重启浏览器，数据不见了。 http://classictutorials.com/CTFiles/

Answer 1

我遇到了同样的问题。我相信这是因为您的代码是本地的而不是在线的。尝试将其添加到某个服务器并远程访问它。

Answer 2

我冒昧地重写你的剧本。我希望你不介意。这会在关闭页面后持续存在。我否则使用完全相同的HTML。我只是看到了我认为更好的方法。

<script type="text/javascript" charset="utf-8">
  var exampledb = {};
  exampledb.somedb = {};
  exampledb.somedb.db = null

  exampledb.somedb.open = function() {
    try {
      alert("Hi");
      if (!window.openDatabase) alert('Databases are not supported in this browser.');
      else {
        var shortName = 'SOMEDB',
        version = '1.0',
        displayName = 'SOMEDB',
        maxSize = 10240; //  10 kbytes
        exampledb.somedb.db = openDatabase(shortName, version, displayName, maxSize);
      }
    } catch(e) {
      if (e == 2) console.log("Invalid database version.");
      else console.log("Unknown error "+e+".");
      return;
    }
  }

  exampledb.somedb.createTable = function() {
    var db = exampledb.somedb.db;
    alert("Create Table");
    db.transaction( function(tx){
      tx.executeSql('CREATE TABLE IF NOT EXISTS page_settings(id INTEGER NOT NULL PRIMARY KEY, settingname TEXT NOT NULL,value TEXT NOT NULL);', [], exampledb.somedb.onSuccess, exampledb.somedb.onError );
    });
  }

  exampledb.somedb.prePopulate = function() {
    var db = exampledb.somedb.db;
    alert("In pre populating");
    db.transaction( function(tx) {
      var setting1 = ['1','bluetooth','on'];
      tx.executeSql("INSERT INTO page_settings(id, settingname, value) VALUES (?,?,?);",[setting1[0],setting1[1],setting1[2]], exampledb.somedb.onSuccess, exampledb.somedb.onError );
    });
  }

  exampledb.somedb.onError = function(tx, e) {
    if(e.code == 1) return false;
    else console.log('Oops. Error was '+e.message+' (Code '+error.code+')');
  }

  exampledb.somedb.onSuccess = function(tx, r) {
    console.log( "SQL Query Succeeded" );
  }

  function initDatabase() {
    exampledb.somedb.open();
    if( exampledb.somedb.createTable() ) exampledb.somedb.prePopulate();
    else alert( "Table already exists!" );
  }
</script>

Answer 3

感谢每一位人士伸出援助之手。我弄清楚出了什么问题。基本上，如果您在表中插入某些内容然后关闭并打开浏览器，然后使用浏览器检查器检查数据将不会显示，因为数据库连接尚未打开。检查员将显示数据库，但在其中它将是空白的。只有在使用任何脚本打开连接时，检查员才能向您显示数据。因此数据实际上存在但只有浏览器检查员在重新启动时才可用。我编写了一个脚本来打开数据库并读取表格，并且能够读取旧数据。

HTML5数据库值不会保持关闭浏览器

3 个答案: