Newbie still learning about HTML5 and localStorage

Hi All,

I’m a bit confused as to how it all works - - sometimes I set the local localStorage like:

localStorage.setItem(“First”, “Bob”);
localStorage.setItem(“Last”, “Smith”);

then read on another page like:

<span id="First"></span> <span id="Last"></span>

<script>
document.getElementById('First').innerHTML = localStorage.getItem("First");
document.getElementById('Last').innerHTML = localStorage.getItem("Last");
</script>

sometimes it shows fine and sometimes on other pages some fields are blank

and other page may show error like:
Uncaught TypeError: Cannot set property ‘innerHTML’ of null

Q: What am I doing wrong - why was there sometimes errors?

  • if I use = document.getElementById(‘Last’) - but fail to have the correct span id=“xxxx” - does that cause the errors?
  • What is the criteria for getting this to always have fields show up?

This does not appear to be an HTML/CSS question, so I have moved it to the JavaScript category in hopes of attracting help there.

This seems to be one of those intermittent problems that can be very hard to diagnose.

What will make things easier to diagnose though is if you can link us to a page where they show fine, and to another page that has blank fields.

Hi Paul - thanks for the help.

I may have found the issue - rather than posting some pages - maybe you can just confirm the following:
after storing the localStorage on page1 - then when I use them on page2 I need to:

1 - set the display fields above the script below like:

<span id="First"></span> <span id="Last"></span> 

2 - set this script below(?) the above display spans?

<script>
document.getElementById('First').innerHTML = localStorage.getItem("First");
document.getElementById('Last').innerHTML = localStorage.getItem("Last");
</script>

Q: AND THE KEY ISSUE is for each document.getElementById(‘xxxx’) I need to have the display span with similar ID like = or it will error out - Correct?

So, If I have 10 document.getElementById(xxx then I need 10 <span id="xxx to not have errors right?

Also what is the best way to use local storage with HTML5 if in my case, I may have 10 data fields to place at various places on a page.


with php I used to place php tags like :

html....html.... <?php echo $first; ?> html....html....

Now with local storage should I do like :

html....
html.... <span id="First"> html html html
html.... html....html....
html....html.... <span id="ADDRESS">
etc....

Is there a better way to display the fields?

Yes that’s right. If an element with the id doesn’t exist you will instead get undefined.

So that we can answer this better, can you give us more of an overview for what you are using the htmlstorage for?

The DOM elements must be in place and loaded, or the script cannot “see” them. You can’t modify the text or innerHTML of something that does not (yet) exist.

HTH,

:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.