JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<input type="text" id="value">
<input type="button" id="save" value="Save">
<input type="button" id="clear" value="Clear">
<details id="messages" open><summary>Messages</summary></details>

CSS

#messages { margin-top: 9px; }
#messages summary { border-bottom: 1px dotted #eee; margin-bottom: 6px; }
#messages .message { margin:0; padding: 3px; border-bottom: 1px solid #ddd; text-indent: 9px; }
#messages .message:hover { background: #eee; }

JavaScript

$(function() {

  var LS_DATA_KEY = "ls_test_20101031"; 
  var container = $("#messages");

  // set event.
  $("#save").click(function() {
    var mes = $("#value").val();
    var data = (localStorage.hasOwnProperty(LS_DATA_KEY)) ?
        JSON.parse(localStorage.getItem(LS_DATA_KEY)) : [];
    data.push(mes);
    localStorage.setItem(LS_DATA_KEY, JSON.stringify(data));
    container.append("<div class='message'>" + mes + "</div>");
    $("#value").val("");
  });

  $("#clear").click(function() {
    localStorage.removeItem(LS_DATA_KEY);
    container.empty();
  });
  
  // show message.
  var data = (localStorage.hasOwnProperty(LS_DATA_KEY)) ?
        JSON.parse(localStorage.getItem(LS_DATA_KEY)) : {};
  for(var i = 0, len = data.length; i < len; i++) {
    container.append("<div class='message'>" + data[i] + "</div>");
  }
  
});