javascript - 如何在装有 Crome 或 Microsoft Edge 的本地机器上使用 localStorage

Question

我想编写一个应该在本地使用的简单 HTML/js 应用程序。它使用 localStorage 来存储数据。但由于 Crome 和 Edge 的安全政策，我不能使用它。在 Chromium 浏览器中它工作正常。

所以问题是如何让我的脚本在那些浏览器中工作？我想在不同的机器上使用它，所以使用本地网络服务器对我来说不是一个好的解决方案。我不允许(也不想)在这些机器上安装额外的软件。

UPD 0.假设我们有一个包含以下内容的文件 app.html:

<script>
  window.onload = function () {
    try {
      localStorage;
    }
    catch (e) {
      console.error("local storage is not available");
      return;
    }
    console.log("this text is never shown in Chrome and Edge");
  }
</script>

然后我们用浏览器打开它，按 F12，选择 js console 并查看结果。我不想看到任何错误消息。

UPD 1.说“本地”是指使用了 file:// 协议(protocol)。不是本地网络服务器。

Answer 1

But I cannot use it because of Crome's and Edge's security politics

您是说某些 Chrome 和 Edge 的安全政策会阻止您使用本地存储吗？如果是这样，请解释更多细节。

要在 Microsoft 浏览器中使用本地存储，我们不应阻止浏览器使用 cookie。请引用以下步骤启用它:

1. 点击窗口右上角的三点更多操作按钮。
2. 从菜单中选择“设置”。
3. 点击“查看高级设置”。
4. 在“Cookie”部分下，使用下拉菜单选择“不阻止 cookie”。
5. 重新启动浏览器。

更多启用LocalStorage的详细步骤，请查看this article或 this link .

编辑:

使用LocalStorage请引用以下代码:

    window.onload = function () {
        try {
            //check if Browser support storage.
            if (typeof (Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.
                //check if localStorage contains the clickcount
                if (localStorage.clickcount) {
                    //if contains the clickcount key, modify its value.
                    localStorage.clickcount = Number(localStorage.clickcount) + 1;
                } else {
                    //else set the default value.
                    localStorage.clickcount = 1;
                } 
                console.log(localStorage.clickcount);

            } else {
                // Sorry! No Web Storage support..
                console.log("Sorry! This version of Browser not support LocalStorage")
            }
        }
        catch (e) {
            console.error("local storage is not available");
            return;
        }
        console.log("this text is never shown in Chrome and Edge");
    }

更多详情请查看this tutorial .

编辑 2:

localStorage 或 sessionStorage 特定于页面的协议(protocol)。如果我们使用 file:// 协议(protocol)(如果 origin 使用 file: 或 data: 方案)，将导致 SecurityError，因此 LocalStorage 无法正常工作。

所以请将您的网页托管到网络服务器(如:IIS)，然后访问它。

更多详细信息，请查看Window.localStorage .