CODEWITHSUNDEEP
javascripthtmllocal-storagemicrosoft-edge
dan
dan

Reputation: 33

How do I access localstorage in a webpage when using the Edge browser?

When I run this webpage in Firefox it works fine. When the page opens it takes a name from the first box, saves it and then displays that name in the second box. It opens showing the two names John and Fred as intended. In Edge it stops at the localStorage.setItem line indicated.

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

How do I change the statements to use localStorage in Edge?

Any help appreciated.

Upvotes: 1

Views: 1626

Answers (2)

NeoX
NeoX

Reputation: 1

Edge localStoragage worked well when loading my page from local file but instead I had problems with Edge when loading the same page from an external server. With IE11 wasn't any problem at all when Display mixed content enabled. Finally the reason for the problem wasn't Edge localStorage but 3rd party script (google jquery-latest.min.js). When loading from the server Edge did not run $(document).ready function even if I tried to allow it in Edge settings. Finally I downloaded whole (http://code.jquery.com/jquery-latest.min.js) script to my computer and then uploaded it to the sever and canged the script source in page HTML to src="jquery-latest.min.js". Now everything worked as ment to be.

Here link to a test page with an example of 3 sliders.

Upvotes: 0

Deepak-MSFT
Deepak-MSFT

Reputation: 11365

I agree with the suggestion given by @Duncan Thacker.

The code is not working because your HTML file is locally stored. To make it work with IE and Edge you need to host that HTML file on any web server.

For testing purpose, You can try to host it on IIS server and than try to access your page. Than after your code will work with IE and Edge.

It should not be consider as an issue/ bug because it happens for a security reasons.

Below are some links which can help you to install IIS on Win 10 and host the site on 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

Let us know, If you still have any issue for hosting the site or running local storage example with IE or Edge. We will try to provide you further suggestions.

Upvotes: 1

Related Questions