JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<section id="left">
    <form>
        <p><input id="box1" placeholder="Enter the key here"></p>
        <p><input id="box2" placeholder="Enter the val here"></p>
        <p><input id="submit" type="button" value="Submit"></p>
    </form>
</section>
<section id="right">
    You'll see some keys and values here if you add them!
</section>

CSS

#left{
    float:left;
    border:3px solid red;
    padding:20px;
    width:160px;
}

#right{
    float:left;
    border:3px solid blue;
    padding:20px;
    width:250px;
    margin-left:20px;
}

JavaScript

function init(){
    var button = document.getElementById("submit");
    button.addEventListener("click", save); 

    disp();
}

function save () { 
    var key = document.getElementById ("box1").value; 
    var value = document.getElementById ("box2").value; 

    localStorage.setItem (key, value); 
    disp();

    // We'll also clear the boxes
    document.getElementById ("box1").value = ""; 
    document.getElementById ("box2").value = ""; 
}

function disp(){
    var box = document.getElementById("right");
    box.innerHTML = "";

    for(var i=0; i < localStorage.length; i++){
        var key = localStorage.key(i);
        var val = localStorage.getItem(key);
    
        var link = '<a href="javascript:deleteVar(\''+key+'\')">Delete</a>';
    
        box.innerHTML += key+": "+val+" "+link+"<br />";
    }
}

window.deleteVar = function(key){
    localStorage.removeItem(key);
    
    // Call the disp function to update the box
    disp();
}
init();