JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div class="counter">LoadCounter: <span></span> .</div>
<input name="key" type="text" placeholder="key" value="my_key">
<input name="value" type="text" placeholder="value" value="some text">
<div class="user-data"></div>
<div class="btn btn-green" data-my="save">save</div>
<div class="btn btn-red" data-my="load">read</div>
<div class="btn btn-aq" data-my="read-all">read all</div>

CSS

.counter {
  margin: 0 0 10px;
  cursor: pointer;
}

.counter:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: yellow;
}

.counter:hover:after {
  background-color: green;
}

.btn {
  width: 100px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  margin: 10px;
  border-radius: 5px;
}

.btn:hover {
  color: white;
}

.btn-red {
  background-color: red;
}

.btn-aq {
  background-color: blue;
}

.btn-green {
  background-color: green;
}

.user-data {
  min-width: 300px;
  overflow: hidden;
  min-height: 100px;
  border: 1px solid black;
  margin: 10px 0;
}
.user-data p{ margin:0;}

JavaScript

$(document).ready(function() {
  var count = localStorage.loadCount;
  if (!count) {
    count = 0;
  } else {
    count++;
  }
  $('.counter>span').text(count);
  localStorage.loadCount = count;

  $('.counter').click(function() {
    localStorage.loadCount = 0;
    $('.counter>span').text(0);
  });

  $('.btn').click(function(event) {
    var key = $("input[name='key']").val();
    var value = $("input[name='value']").val();
    var target = $(event.target);
    if (target.attr('data-my') == 'save') {
      localStorage[key] = value;
      //alert(key+':'+value+' .');

    };
    if (target.attr('data-my') == 'load') {
      var read = localStorage[key];
      var text = key + " : " + read + ' .';
      $('.user-data').text(text);
    }
    if (target.attr('data-my') == 'read-all') {
      var outPlace = $('.user-data');
      var pElem = document.createElement('p');
      outPlace.text('');
      
      for (var i = 0; i < localStorage.length; i++) {
      	var item = (i + ' ' + localStorage.key(i) + ' : ' + localStorage[localStorage.key(i)] + ' .');
        var clone = pElem.cloneNode();
        clone.innerHTML= item + "</br>";
        outPlace.append(clone);
          
       }
    }

  });


});