top of page

<!DOCTYPE html>

<style media="screen">
input, button, textarea {
   padding: 7px;
   height: auto;

fieldset {
   margin-bottom: 20px;


   <legend>Draft a Note</legend>
   <input id="inpKey" type="text" size="40" placeholder="Title of your note...">
   <textarea id="inpValue" type="text" rows="10" cols="80" placeholder="Write note here..."></textarea>
   <button type="button" id="btnInsert">Save Note to Storage</button>
   <button type="button" id="btnClear">Clear Storage</button>

   <legend>Notes in Storage</legend>
   <div id="lsOutput"></div>

<script type="text/javascript">
   const inpKey = document.getElementById("inpKey");
   const inpValue = document.getElementById("inpValue");
   const btnInsert = document.getElementById("btnInsert");
   const lsOutput = document.getElementById("lsOutput");
   const btnClear = document.getElementById("btnClear");

    btnInsert.onclick = function() {
       const key = inpKey.value;
       const value = inpValue.value;

        if (key && value) {
           localStorage.setItem(key, value);

    btnClear.onclick = function() {

    for (let i = 0; i < localStorage.length; i++) {
       const key = localStorage.key(i);
       const value = localStorage.getItem(key);

        lsOutput.innerHTML += `${key}: ${value}<br />`;



bottom of page