gpt4 book ai didi

javascript - 在新的 Google 协作平台 中使用 localStorage 和 IndexedDB 不起作用

转载 作者:行者123 更新时间:2023-11-29 15:09:54 25 4
gpt4 key购买 nike

我正在尝试将新版 Google 协作平台用于我开发的网页,但是,我在存储本地数据时遇到了问题。本地文件在 windows 和 apple safari/chrome 中工作正常。从 Google 协作平台尝试,但没有任何乐趣!此外,在 safari 中,会抛出一个错误,“在无效的安全上下文中调用了 IDBFactory.open()”。

我真的很想通过谷歌网站托管我的网站,而不链接到另一台服务器。我特别需要一些小项目的本地持久数据。我似乎也无法使 cookie 起作用。

有什么建议吗?

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

说明位于 HTML 页面本身。

所有代码都可以在 html 文件的本地实例中正常工作。可以为纬度、经度、弧度和键输入新值、保存和读取它们。我也可以刷新页面,然后读取它们而不先存储,没有问题。这证明这些值不仅仅是 session 持久化。

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

我相信我已经正确地实现了代码(尽管有些人可能会反对,我敢肯定。这里没有骄傲,欢迎批评)。

我进行了大量的谷歌搜索,尤其是关于谷歌网站和 indexeddb/localstorage 的搜索,并且还在谷歌社区帮助论坛上发帖。仍然没有成功。

目前,我没有后备方法,但需要一些相对简单的方法。谁能给我一点快乐?提前致谢!


<!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 >

最佳答案

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

例如,这是我第一次加载页面时 iframe 的数据:

first load

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

after refresh

可以看到,刷新后的域完全不同,这意味着它有一个全新的空数据库。

关于javascript - 在新的 Google 协作平台 <Embed HTML> 中使用 localStorage 和 IndexedDB 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55886475/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com