SO48769877

<!DOCTYPE html>
<html>

<head>

</head>

<body>
<ol>
  <li>Enter text then click the <kbd>BLR</kbd> button to unfocus from the input thereby triggering the change event.</li>
  <li>Next, refresh this page and the text entered should be in the input again.</li>
  <li>In order to remove the text from localStorage, click the <kbd>CLR</kbd> button.</li>
  </ol>
  
  <input class='card-1' value=''>
  <input class='blur' type='button' value='BLR'>
  <input class='clear' type='button' value='CLR'>

  <output class='view'></output>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var data = getData('card-1');
    
    console.log(data);
    
    if (data) {
      $('.card-1').val(data);
    }

    $(".card-1").on('change', function() {
      var storage = $(this).val();
      setData.call(this, 'card-1', storage);
      $(this).fadeOut();
    });

    function getData(key) {
      var data = localStorage.getItem(key);
      if (data === null) {
        return false;
      } else {
        return data;
      }
    }

    function setData(key, value) {
      var obj = {};
      if (key === undefined || value === undefined) {
        return false;
      } else {
        localStorage.setItem(key, value);
        return true;
      }
    }
    
    $('.view').val('card-1: '+data);
    $('.clear').on('click', function() {
      localStorage.clear();
    })
  </script>
</body>

</html>