JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <input id='clearHistory' type='button' value='Remove All History' />
  <input id='showHistory' type='button' value='Show History' />
  <ul id='history'>
    <li>
      <a href="#aa" data-date-created="November 12, 2001 03:24:00">Link 1</a>
    </li>
    <li>
      <a href="#bb" data-date-created="August 4, 1993 03:24:00">Link 2</a>
    </li>
    <li>
      <a href="#cc" data-date-created="October 17, 1995 03:24:00">Link 3</a>
    </li>
    <li>
      <a href="#dd" data-date-created="December 1, 2010 03:24:00">Link 4</a>
    </li>
    <li>
      <a href="#ee" data-date-created="August 17, 2004 03:24:00">Link 5</a>
    </li>
  </ul>
</div>

<p>Click on 'Show History' to see the 'user history'.</p>
<ul id='storedHistory'></ul>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='storage.js'></script>

</body>

</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Hind);
body {
  font-family: 'Hind', sans-serif;
}

ul {
  list-style-type: none;
  text-decoration: none;
}

li {
  margin-bottom: 10px;
}

JavaScript

/*<![CDATA[*/
$(document).ready(function() {
  var storedHistory = document.getElementById('storedHistory');

  Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
  };

  Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
  };

  //function sortDatesAscending(a, b) { return a.valueOf() - b.valueOf(); } function sortDatesDescending(a, b) { return b.valueOf() - a.valueOf(); }

  function sortLinkDatesAscending(obj1, obj2) {
    return obj1.date.valueOf() - obj2.date.valueOf();
  }

  function sortLinkDatesDescending(obj1, obj2) {
    return obj2.date.valueOf() - obj1.date.valueOf();
  }

  var history = {
    items: []
  };

  // Get each anchor and retrieve its date and link. Add to an object and add that object to the history's array Sort by ascending. Add to local storage.
  $('ul > li > a').click(function(e) {
    var date = $(this).data('date-created');
    var listData = {
      link: $(this).attr("href"),
      date: date
    };
    history.items.push(listData);
    window.localStorage.setObject("history", history);
  });

  /* Remove items from local storage */
  $('#clearHistory').click(function() {
    window.localStorage.clear();
  });

  /* Retrieve items from local storage and add to stored history unordered list */
  $('#showHistory').click(function() {
    console.log(window.localStorage);
    var listHistory = localStorage.getObject('history');
    var counter = 1;
    for (var i = 0; i < listHistory.items.length; i++) {
      $("#storedHistory").append('<li>' + counter + '. Link: ' + listHistory.items[i].link + '<br>' + 'Date: ' + listHistory.items[i].date + '</li>');
      counter++;
    }
  });
});
/*]]>*/