localStorage-basic

by hannahtaylor

HTML

<fieldset name="dataForm" id="dataForm">
	<legend>Enter Data</legend>
  <input id="dataName" type="text" placeholder="Enter a name...">
  <input id="dataValue" type="text" placeholder="Enter a value...">
  <button type="button" id="dataBtn">Store Data</button>
</fieldset>

<fieldset>
	<legend>Local Storage</legend>
	<div id="dataOutput"></div>
</fieldset>

JavaScript

//Set constants for later reference
const dataName = document.getElementById("dataName");
const dataValue = document.getElementById("dataValue");
const dataBtn = document.getElementById("dataBtn");
const dataOutput = document.getElementById("dataOutput");

//When button is clicked, store local data
dataBtn.onclick = function () {
    //get values from input
    const key = dataName.value;
    const value = dataValue.value;

    //show values in the console
    console.log(key);
    console.log(value);

    //check that input boxes aren't empty
    if (key && value) {
        
        //**Set name and value to local storage
        localStorage.setItem(name, value);   
    }
}