javascript - 本地存储和 Web SQL 不能跨多个页面工作

Question

首先，我有两个页面(在同一个文件夹中，在同一个域中)，我们称它们为 dummy 和 dummy2。

我已经尝试过 html5 localstorage 和现在的 webSQL，我发现我可以在 dummy 上保存和读取数据(dummy 是具有保存和读取按钮的页面，而 dummy2 只有一个读取按钮)，但是当我从 dummy 切换到 dummy2，本地存储和 Web SQL 消失。

据我了解，这两种技术都应该保存要在您网站的多个页面上使用的数据？

这是我的 webSQL 代码，本地存储被注释掉了

<script>
    $(document).ready(function () {
        $("#save").click(function() {
            //localStorage.setItem('dummy', 'Hello there');
            //console.log(localStorage.getItem('dummy'));
            var db = window.openDatabase("UserDetails", "1.0", "User Details", 10000);
            db.transaction(populateDB, onDBError, onDBSuccess);
            function populateDB(tx) {
                tx.executeSql('DROP TABLE IF EXISTS DETAILS');
                tx.executeSql('CREATE TABLE IF NOT EXISTS DETAILS (id unique, Name, Email)');
                tx.executeSql('INSERT INTO DETAILS (id, Name, Email) VALUES (1, "User1", "example@example.com")');
            }
            function onDBError(error) {
                console.log("Error");
            }
            function onDBSuccess(msg) {
                console.log("Success (Saved)");
            }
        });
        $("#read").click(function() {
            tx.executeSql('SELECT * FROM DETAILS ORDER BY Name', [], onQuerySuccess, onDBError);
            function onQuerySuccess(tx, results){
                var name = results.row.item(i).Name;
                console.log(name);
            }

        });
    });
</script>

这是点击保存的结果；

但是当我移动到 dummy2 时:

有什么想法吗？

Answer 1

它是关于“资源”选项卡的某种奇怪的系统或什至是 chrome 安装损坏的东西。当我查看您的代码时，您的代码工作正常，我在 localStorage 下的“资源”选项卡会立即更新并在重新加载时持续存在，但我记得有一次“资源”选项卡对我不起作用，我遇到了类似的问题，它无法刷新，我必须使用控制台才能看到正确的结果。

如果它在 chrome 控制台中为您工作或通过以其他方式以编程方式查询 localStorage 对象，那么无论它在那些 Web 检查器 UI 中说什么都仍然有效并且您的代码没问题。