1

I want to write a simple HTML/js app that is supposed to be used locally. It uses localStorage for storing data. But I cannot use it because of Crome's and Edge's security politics. In Chromium browser it works fine though.

So the question is how to let my script work in those browsers? I want to use it on different machines, so using a local web server is not a good solution for me. I am not allowed (and don't want) to install extra software on those machines.

UPD 0. Say we have a file app.html with the following content:

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

Then we open it with a browser, hit F12, choose js console and see results. I'd like not to see any error message.

UPD 1. Saing "locally" I meant that file:// protocol was used. Not a local web server.

1 Answers1

3

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

Do you mean some Chrome's and Edge's security politics will block you using local Storage? If that is the case, please explain more details about it.

To use Local Storage in Microsoft Browser, we should not block the browser to use cookies. Please refer to the following steps to enable it:

  1. Click on the three-dot More Actions button in the top-right corner of your window.
  2. Select “Settings” from the menu.
  3. Click “View advanced settings”.
  4. Under the “Cookies” section, use the drop menu to select “Don’t block cookies”.
  5. Restart your browser.

More detail steps to enable LocalStorage, please check this article or this link.

Edit:

Please refer to the following code to use 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");
    }

More detail information, please check this tutorial.

Edit 2:

Either the localStorage or sessionStorage is specific to the protocol of the page. If we use the file:// protocol (if the origin uses the file: or data: scheme), it will cause the SecurityError, so the LocalStorage not working.

So please host your web page to the web server (such as: IIS), then access it.

More detail information, please check the Window.localStorage.

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • I've updated my question. Cookies are not the case. In all browsers cookies are allowed. I didn't try to use them locally, so I don't know whether they work or not. – Zephyr Zephyroff Dec 12 '19 at 18:13
  • @Zephyr Zephyroff, Please check the edit, and refer the tutorial to use local storage. – Zhi Lv Dec 13 '19 at 09:10
  • Output in Chromium and Firefox: `1`, `this text is never shown in Chrome and Edge`. Output in Chrome: `text.html:23 local storage is not available` – Zephyr Zephyroff Dec 15 '19 at 13:50
  • Please check the above sample code [result](https://i.stack.imgur.com/7G4Aa.png), as we can see they all works well on my side. `local storage is not available` About this exception, please try to set break point in the try statement and step by step to debug your code, whether there have some exception? Also, you could check the detail exception message to narrow down the issue. – Zhi Lv Dec 17 '19 at 06:38
  • Thank you for the screenshot. Now it's more clear. You're using a local web server, but I cannot use it. I made a note in my question about that. The files are opened using `file://` protocol. If you create an empty file, open it with the Chrome browser directly, and type `localStorage` in js console then you will see what I am talking about =) – Zephyr Zephyroff Dec 17 '19 at 19:47
  • Either the localStorage or sessionStorage is specific to the protocol of the page. If we use the file:// protocol (if the origin uses the file: or data: scheme), it will cause the SecurityError, so the LocalStorage not working. try to host your web page to web server, then access it. – Zhi Lv Dec 18 '19 at 02:41
  • Do you think there is no solution? Like a special command line argument or a setting or something? – Zephyr Zephyroff Dec 21 '19 at 12:17
  • 1
    As far as I know, there doesn't have the solution to use the localStorage with file:// protocol. We have to host the web page to the web server. Besides, here is a thread about [Javascript/HTML Storage Options Under File Protocol (file://)](https://stackoverflow.com/questions/5914029/javascript-html-storage-options-under-file-protocol-file), might be it can help you. – Zhi Lv Dec 23 '19 at 07:20