CODEWITHSUNDEEP
javascriptgoogle-chromelocal-storagemicrosoft-edge
Zephyr Zephyroff
Zephyr Zephyroff

Reputation: 121

How to use localStorage on a local machine with Crome or Microsoft Edge

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.

Upvotes: 1

Views: 1963

Answers (1)

Zhi Lv
Zhi Lv

Reputation: 21656

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.

Upvotes: 3

Related Questions