使用 Edge 浏览器时如何访问网页中的 localstorage？答案

【问题标题】：How do I access localstorage in a webpage when using the Edge browser?使用 Edge 浏览器时如何访问网页中的 localstorage？
【发布时间】：2019-07-05 11:05:51
【问题描述】：

当我在 Firefox 中运行此网页时，它运行良好。当页面打开时，它会从第一个框中获取一个名称，将其保存，然后在第二个框中显示该名称。它会按预期打开显示 John 和 Fred 这两个名字。在 Edge 中，它停在指示的 localStorage.setItem 行处。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data test</title>

<script>

function shift_Data() {

//find the data
var data_source = document.getElementById("data_from_here");

var data_to_save = " ";
    data_to_save = data_source.options[1].value;

//save the data
localStorage.setItem("data_saved", data_to_save);

// **** code does not get to here in the Edge browser ****

//retreive the data
var data_target = document.getElementById("data_to_here");
        data_target.innerHTML = '';

var the_data_saved = " ";

the_data_saved = localStorage.getItem("data_saved");

//display the data

    var option = document.createElement('option');
        option.textContent = the_data_saved;

    data_target.appendChild(option);
}

</script>
</head>

<body onload="shift_Data()">

<h1>data test 1</h1>

<form id="myForm">

  <select id="data_from_here">
        <option value="John">John</option>
    <option value="Fred">Fred</option>
  </select>

  <select id="data_to_here">
    <option>data is saved here</option>
  </select>

</form>

</body>

</html>

如何更改语句以在 Edge 中使用 localStorage？

任何帮助表示赞赏。

【问题讨论】：

打开开发者控制台并告诉我们错误是什么。 Edge 的 localStorage.setItem 应该没有问题。查看支持 -> developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
您是通过http还是本地文件访问网站？当它是本地文件时，Edge 不会让你使用 localstorage：developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
该文件是从计算机硬盘驱动器或记忆棒中使用的。它是用记事本编写的，并保存为 .html，所以它再简单不过了。作为新手，我不知道如何按照 daddygames 的建议打开开发者控制台。我关注了邓肯的链接，并认为这是一个长期存在的问题。这是正确的解释吗？
@dan 不，邓肯是正确的。由于您使用的是file:// 协议，Edge 不允许使用localStorage，这是兼容的浏览器应该这样做的。
谢谢邓肯和帕特里克。您的反馈提高了我对这里发生的事情的认识。

标签： javascript html local-storage microsoft-edge

【解决方案1】：

从本地文件加载我的页面时，Edge localStoragage 运行良好，但从外部服务器加载同一页面时，Edge 出现问题。启用显示混合内容后，使用 IE11 完全没有问题。最后，问题的原因不是 Edge localStorage，而是第 3 方脚本（google jquery-latest.min.js）。从服务器加载时，即使我尝试在 Edge 设置中允许它，Edge 也没有运行 $(document).ready 函数。最后，我将整个（http://code.jquery.com/jquery-latest.min.js）脚本下载到我的计算机上，然后将其上传到服务器并将页面 HTML 中的脚本源更改为 src="jquery-latest.min.js"。现在一切正常。

在这里link 到一个带有 3 个滑块示例的测试页面。

【讨论】：

【解决方案2】：

我同意@Duncan Thacker 的建议。

代码不工作，因为您的 HTML 文件是本地存储的。要使其与 IE 和 Edge 一起使用，您需要在任何 Web 服务器上托管该 HTML 文件。

出于测试目的，您可以尝试将其托管在 IIS 服务器上，然后尝试访问您的页面。比之后您的代码将适用于 IE 和 Edge。

不应将其视为问题/错误，因为它是出于安全原因而发生的。

以下是一些可以帮助您在 Win 10 上安装 IIS 并在 IIS 上托管网站的链接。

(1)How to Install IIS on Windows 8 or Windows 10

(2)Turn on IIS in Windows 10

(3)How to set up your first IIS Web site

(4)How to Host a Web Site in Internet Information Server manager

如果您在托管网站或使用 IE 或 Edge 运行本地存储示例时仍有任何问题，请告诉我们。我们会尽力为您提供进一步的建议。

【讨论】：

非常感谢，迪帕克。您的反馈对我很有帮助，感谢您花时间为我提供帮助。
我建议您将有用的建议标记为答案，以便将来解决类似问题的其他社区成员。感谢您的理解。