Question

我正在尝试将新的Google网站用于开发的网页，但是，我在存储本地数据时遇到了麻烦。本地文件在Windows和苹果Safari / Chrome浏览器中可以正常工作。在Google协作平台上尝试一下，没有任何乐趣！此外，在野生动物园中，将引发错误，“在无效的安全上下文中调用了IDBFactory.open（）”。

我真的很想通过Google网站托管我的网站，而不链接到其他服务器。我特别需要仅用于一些小项目的本地持久性数据。我似乎也无法使Cookie正常工作。

有什么建议吗？

我已经在Windows 10 Surface Pro 2017，运行Safari 12.2的Apple iPad，运行macOs Mojave 10.14的Apple Mac Mini上进行了尝试。我从Windows 10命令行使用SimpleHTTPServer将文件共享为Web服务器。我还通过电子邮件发送文件，并直接在指定的系统上打开。最后，我在https://sites.google.com/view/gerrymap创建了一个新的Google Sites网站，这很简单，只是一个Embed HTML元素，下面的文本已复制到源代码编辑框中。如果愿意，欢迎所有人访问该页面。否则，请使用下面的简短发布文件。

说明在HTML页面本身中。

所有代码都可以从html文件的本地实例正常工作。可以为纬度，经度，弧度和键输入新值，保存并读取。我还可以刷新页面，然后在不先存储的情况下阅读它们，这没有问题。这证明了这些值不仅仅是会话持久性的。

与Google协作平台不同。我在这个问题上建立了一个使用html文件的网站。当我输入新值并按下保存按钮时，IndexedDB失败，但是localStorage成功返回了保存的值。但是，如果按下刷新按钮，然后在不尝试先存储的情况下读取值，则IndexedDB再次失败，但是localStorage也失败，因为它不检索任何值。

我相信我已经正确实现了代码（尽管我敢肯定，尽管其中有些可能会例外。在这里不感到骄傲，欢迎批评家）。

我已经做了很多Google搜索，尤其是有关Google网站和indexeddb / localstorage的搜索，并且还发布在了Google社区帮助论坛上。仍然没有成功。

目前，我没有后备方法，但需要一些相对简单的方法。有人可以用我的方式带来一点喜悦吗？提前谢谢！

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Test Local Storage</title>
    <style>
    </style>
</head>

<body onload="initializeValues()">
    Instructions:  <br />
    1.  Save this sample code in an html file locally and open in a browser.<br />
    2.  Enter different values into the lat, long, rad, and key edit boxes.<br />
    3.  Press TrySave to store the values in indexedDB and localStorage.<br />
    4.  Refresh the webpage from the browser address line<br />
    5.  Press the individual Try IndexedDB and Try LocalStorage buttons to attempt<br />
    6.  Try inserting this code into a New Google Site, or access https://sites.google.com/view/gerrymap/home <br />
    <br>
    <input id="latitude" /> Latitude<br><br>
    <input id="longitude" /> Longitude<br><br>
    <input id="radius" /> Radius<br><br>
    <input id="key" /> Key<br><br>

    <button onclick="TryIndexedDB()" title="This tries to load via IndexedDB">Try IndexedDB</button><br><br>
    <button onclick="TryLocalStorage()" title="This tries to load via localStorage">Try localStorage</button><br><br>
    <button onclick="trySave()" title="This tries to save the data in both methods (IndexedDB, localStorage)">Try Save</button><br><br>
    <button onclick="clearAll()" title="Clear the log space at the bottom of this example page">Clear Log</button><br><br>

    <div id="hello">
    </div>

    <script>
        "use strict";

        function clearAll() {
            document.getElementById("hello").innerHTML = "";
        }

        // tagBeginDefaultsReplace
        var navLatitude = 39;
        var navLongitude = -76.7;
        var navMaxDist = 200;
        var navKey = "PleaseAddYourKey";

        function initializeValues() {
            document.getElementById("latitude").value = navLatitude;
            document.getElementById("longitude").value = navLongitude;
            document.getElementById("radius").value = navMaxDist;
            document.getElementById("key").value = navKey;
        }

        function trySave() {
            navLatitude = document.getElementById("latitude").value;
            navLongitude = document.getElementById("longitude").value;
            navMaxDist = document.getElementById("radius").value;
            navKey = document.getElementById("key").value;

            // Save using indexeddb
            getLocationDB(true, FinishIndexedDB);
            // Save using localStorage
            localStorage.setItem('latitude', navLatitude.toString());
            localStorage.setItem('longitude', navLongitude.toString());
            localStorage.setItem('radius', navMaxDist.toString());
            localStorage.setItem('key', navKey.toString());
            mylog("Done saving localStorage");
        }

        function getLocationDB(bSave, callbackf) {
            var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
            var openDB;

            try {
                var myitem;

                openDB = indexedDB.open("SampleDatabase", 1);
                openDB.onupgradeneeded = function () {
                    var db = openDB.result;
                    var store = db.createObjectStore("SampleStore", { keyPath: "id" });
                    var index = store.createIndex("PosIndex", ["pos.latitude", "pos.longitude", "pos.radius", "pos.navkey"]);
                };

                openDB.onsuccess = function () {
                    // Start a new transaction var db = openDB.result;
                    callbackf("Successfully opened openDB");
                    var db = openDB.result;
                    var tx = db.transaction("SampleStore", "readwrite");
                    var store = tx.objectStore("SampleStore");
                    if (bSave) {
                        if (navLatitude != undefined && navLongitude != undefined && navMaxDist != undefined)
                            store.put({ id: 0, pos: { latitude: navLatitude, longitude: navLongitude, radius: navMaxDist, navkey: navKey } });
                        else
                            store.put({ id: 0, pos: { latitude: "38", longitude: "-75.7", radius: "100", navkey: "Please Enter Mapbox Key" } });
                        callbackf("Save indexeddb finished");
                    }
                    else {
                        var getNavLoc = store.get(0);

                        getNavLoc.onsuccess = function () {
                            if (getNavLoc != undefined
                                && getNavLoc.result != undefined) {
                                callbackf("Succeeded reading from store.  Result=" + JSON.stringify(getNavLoc.result));
                                navLatitude = parseFloat(getNavLoc.result.pos.latitude);
                                navLongitude = parseFloat(getNavLoc.result.pos.longitude);
                                navMaxDist = parseFloat(getNavLoc.result.pos.radius);
                                navKey = getNavLoc.result.pos.navkey;
                            }
                            else {
                                callbackf("Succeeded reading from store.  Result=undefined");
                                navLatitude = navLongitude = navMaxDist = navKey = "undef";
                            }
                            initializeValues();
                        }


                        getNavLoc.onerror = function () {
                            callbackf("An error occurred getting indexeddb");
                        }

                    }
                }

                openDB.onerror = function () {
                    callbackf("An error occurred opening openDB");
                }
            }
            catch (e) {
                callbackf("Caught error in try block of indexeddb:  " + e.Message);
            }

        }

        function TryIndexedDB() {
            getLocationDB(false, FinishIndexedDB);
        }

        function TryLocalStorage() {
            mylog("localStorage read");
            navLatitude = localStorage.getItem('latitude');
            mylog("latitude=" + navLatitude);
            navLongitude = localStorage.getItem('longitude');
            mylog("longitude=" + navLongitude);
            navMaxDist = localStorage.getItem('radius');
            mylog("radius=" + navMaxDist);
            navKey = localStorage.getItem('key');
            mylog("key=" + navKey);
            if (navLatitude == undefined)
                navLatitude = "undef";
            if (navLongitude == undefined)
                navLongitude = "undef";
            if (navMaxDist == undefined)
                navMaxDist = "undef";
            if (navKey == undefined)
                navKey = "undef";
            initializeValues();
        }

        function FinishIndexedDB(nSucceeded) {
            mylog(nSucceeded);
        }

        function mylog(logstr) {
            document.getElementById("hello").innerHTML += "<br>" + logstr.toString();
        }

    </script>
</body>
</html >

Answer 1

问题在于Google协作平台提供iframe内容的方式。我不确定幕后的确切细节，但似乎每次页面加载时都会随机生成一个域。由于localStorage和IndexedDB与特定域相关联，因此导致页面重新加载时保存的数据“丢失”。

作为示例，以下是我第一次加载页面时的iframe数据：

这是刷新页面后iframe的数据：

如您所见，域在刷新后完全不同，这意味着它具有一个全新的空数据库。

在新的Google网站中使用localStorage和IndexedDB <embed html =“” />不起作用

1 个答案: