stored data in local storage and retrieve it and display using Java Script

I'm trying to store user input in Local Storage, then retrieve it and display using JavaScript. I'm getting errors saying:

Cannot read property 'innerHTML' of null

and

key is not defined

<body>
    <fieldset>
        <legend>Insert Data</legend>
            <input type="text" id="inputKey" placeholder="enter key">
            <input type="text" id="inputValue" placeholder="enter value">
            <button type="submit" id="insertBtn">Insert Data</button>
    </fieldset>
    <fieldset>
       <legend>local Storage</legend>
       <h3 id="lsOutput"></h3>
    </fieldset>

<script>

let inputKey = document.getElementById('inputKey');
let inputValue = document.getElementById('inputValue');
let inputButton = document.getElementById('insertBtn');
let output = document.getElementById('IsOutput');
inputButton.addEventListener("click", store);
function store(){
     const key = inputKey.value;
     const value = inputValue.value;

  if( key && value){

      localStorage.setItem(key, value);

    //   location.reload();   
  }
}
  for(const i = 0 ; i < localStorage.length; i++){
      const getKey = localStorage.key(i);
      const getValue = localStorage.getItem(key);
      output.innerHTML += `${getKey}: ${getValue}`;
  }
</script>
</body>
</html>



Read more here: https://stackoverflow.com/questions/64955579/stored-data-in-local-storage-and-retrieve-it-and-display-using-java-script

Content Attribution

This content was originally published by JPabs at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: