时间戳

首页 > 解决方案 > 如何在具有 Crome 或 Microsoft Edge 的本地计算机上使用 localStorage

javascript - 如何在具有 Crome 或 Microsoft Edge 的本地计算机上使用 localStorage

问题描述

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

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

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控制台，看看结果。我不想看到任何错误消息。

UPD 1. “本地”说我的意思是使用了file://协议。不是本地网络服务器。

标签： javascriptgoogle-chromelocal-storagemicrosoft-edge

解决方案

但由于 Crome 和 Edge 的安全政治，我无法使用它

您是说某些 Chrome 和 Edge 的安全政策会阻止您使用本地存储吗？如果是这种情况，请解释有关它的更多详细信息。

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

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

启用 LocalStorage 的更多详细步骤，请查看本文或此链接。

编辑：

使用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");
    }

更多详细信息，请查看本教程。

编辑2：

localStorage 或 sessionStorage 都特定于页面的协议。如果我们使用file://协议（如果源使用文件：或数据：方案），会导致SecurityError，因此LocalStorage不起作用。

所以请将您的网页托管到网络服务器（例如：IIS）上，然后访问它。

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

推荐阅读