OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why doesn't window.localStorage conserve my saved objects when a new HTML page is loaded?

  • Thread starter Thread starter user17911
  • Start date Start date
U

user17911

Guest
Based on what I have read and understood so far from MDN JavaScript documentation, in particular, the Storage: setItem() method section, it seems that it is possible to transfer objects between two HTML pages, for example, by clicking on a link in the first page redirecting the user to the other page, provided that before saving the object we wish to transfer from the first page to the second, that object is converted to a string via JSON.stringify (I mean, if it is not already a string).

My environment:

Code:
OS : Windows 11 (64 bits)
Microsoft Edge version : 126.0.2592.61 (64 bits)
Firefox version : 115.12.0esr (64 bits)

I'm going to indicate below, my test case so that you might be able to reproduce easily the problem that I've encountered by simply a copy/paste of the contents of the following files which you need to put somewhere on your computer but in the same directory:

file1.html

Code:
<!DOCTYPE html>
<html lang="fr-FR">
  <head>
    <title>File1</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
     function saveObject() {
         const myObj = {
             key1: "value_01",
             key2: "value_02"
         };
         window.localStorage.setItem(
             "mySavedObj",
             JSON.stringify(myObj)
         );
     }
    </script>
  </head>
  <body onload="saveObject();">
    <p>Saving the object in file1.html</p>
  </body>
</html>

file2.html

Code:
<!DOCTYPE html>
<html lang="fr-FR">
  <head>
    <title>File2</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
     function loadObject() {
         const loadedObj = JSON.parse(
             window.localStorage.getItem("mySavedObj")
         );
         objStr = JSON.stringify(loadedObj);
         console.log(`Object loaded successfully : ${objStr}`);
     }
    </script>
  </head>
  <body onload="loadObject();">
    <p>Loading the object in file2.html</p>
  </body>
</html>

So, what is the problem?


  • If I run the above-mentioned programs using Microsoft Edge, that is, opening first, file1.html and then opening file2.html, I get the expected result without any problem via the Console of the browser's Inspect element. The message Object loaded successfully : {"key1":"value_01","key2":"value_02"} is printed. Moreover, after file2.html has been loaded, if I write window.localStorage in the console and then hit the Enter, I have the following content which is printed in the console : Storage {mySavedObj : '{"key1":"value_01", "key2":"value_02"}, length: 1}. This shows clearly that my object was conserved going from file1.html to file2.html.


  • But if I do exactly the same thing using Firefox, I get Object loaded successfully : null printed on the console. And when I check the content of window.localStorage I get Storage { length: 0 } as the result. So the localStorage is completly empty as if I hadn't saved any object!

Any idea about the problem that I encounter when I run the same program in Firefox?

<p>Based on what I have read and understood so far from MDN JavaScript documentation, in particular, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem" rel="nofollow noreferrer">Storage: setItem() method</a> section, it seems that it is possible to transfer objects between two HTML pages, for example, by clicking on a link in the first page redirecting the user to the other page, provided that before saving the object we wish to transfer from the first page to the second, that object is converted to a string via <code>JSON.stringify</code> (I mean, if it is not already a string).</p>
<p><strong>My environment:</strong></p>
<pre><code>OS : Windows 11 (64 bits)
Microsoft Edge version : 126.0.2592.61 (64 bits)
Firefox version : 115.12.0esr (64 bits)
</code></pre>
<p>I'm going to indicate below, my test case so that you might be able to reproduce easily the problem that I've encountered by simply a copy/paste of the contents of the following files which you need to put somewhere on your computer but <strong>in the same directory</strong>:</p>
<p><strong>file1.html</strong></p>
<pre><code><!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>File1</title>
<meta charset="UTF-8">
<script type="text/javascript">
function saveObject() {
const myObj = {
key1: "value_01",
key2: "value_02"
};
window.localStorage.setItem(
"mySavedObj",
JSON.stringify(myObj)
);
}
</script>
</head>
<body onload="saveObject();">
<p>Saving the object in file1.html</p>
</body>
</html>
</code></pre>
<p><strong>file2.html</strong></p>
<pre><code><!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>File2</title>
<meta charset="UTF-8">
<script type="text/javascript">
function loadObject() {
const loadedObj = JSON.parse(
window.localStorage.getItem("mySavedObj")
);
objStr = JSON.stringify(loadedObj);
console.log(`Object loaded successfully : ${objStr}`);
}
</script>
</head>
<body onload="loadObject();">
<p>Loading the object in file2.html</p>
</body>
</html>
</code></pre>
<p><strong>So, what is the problem?</strong></p>
<ul>
<li><p>If I run the above-mentioned programs using Microsoft Edge, that is, opening first, <code>file1.html</code> and then opening <code>file2.html</code>, I get the expected result without any problem via the Console of the browser's <strong>Inspect</strong> element. The message <code>Object loaded successfully : {"key1":"value_01","key2":"value_02"}</code> is printed. Moreover, after <code>file2.html</code> has been loaded, if I write <code>window.localStorage</code> in the console and then hit the Enter, I have the following content which is printed in the console : <code>Storage {mySavedObj : '{"key1":"value_01", "key2":"value_02"}, length: 1}</code>. This shows clearly that my object was conserved going from <code>file1.html</code> to <code>file2.html</code>.</p>
</li>
<li><p>But if I do exactly the same thing using Firefox, I get <code>Object loaded successfully : null</code> printed on the console. And when I check the content of <code>window.localStorage</code> I get <code>Storage { length: 0 }</code> as the result. So the <code>localStorage</code> is completly empty as if I hadn't saved any object!</p>
</li>
</ul>
<p>Any idea about the problem that I encounter when I run the same program in Firefox?</p>
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top