Local Storage Sort Object By Keys Resave In Order

by Hastig Z

HTML

<div class="fruit-wrapper-info">
About - This fiddle made to compliment a question on <a href="http://stackoverflow.com/questions/39814601/how-to-numerically-sort-nested-keys-in-local-storage">stack overflow</a>
<br><br>
How To use - Click the buttons from 1 to 3.
<br><br>
1. Gathers info from below list and saves to local storage in order gathered (so we have something to work with) simulating an unorderd local storage situation.
<br><br>
2. Gets object from local storage, orders it by date, outputs it in order (by date which is represented in milliseconds from epoch to fruit entry date) then resaves it to local storage, in order.
<br><br>
3. Now we can output direct from local storage ordered by date without having to order it. Redundant but for special situations where first having to order it then outout it on ever call to display data can slow things down. Can set it so that on first load it checks if data is ordered (ordered = false), if not it orders it and sets ordered to true and remains that way until another entry is added and no sort is first done.
</div>
<div class="fruit-wrapper-title">Fruit Delivery List (note dates)</div>
<div class="fruit-wrapper">
  <div class="fruit-entry" id="1128232545000">
    <div class="id">1128232545000</div>
    <div class="date">2005-10-02T05:55:45.927Z</div>
    <div class="fruit">Tomato</div>
    <div class="weight">300</div>
  </div>
  <div class="fruit-entry" id="1475387730000">
    <div class="id">1475387730000</div>
    <div class="date">2016-10-02T05:55:30.497Z</div>
    <div class="fruit">Cucumber</div>
    <div class="weight">100</div>
  </div>
  <div class="fruit-entry" id="1285998955000">
    <div class="id">1285998955000</div>
    <div class="date">2010-10-02T05:55:55.996Z</div>
    <div class="fruit">Avocado</div>
    <div class="weight">200</div>
  </div>
</div>

<div class="buttons">
  <div class="button-one"><span>1</span>save</div>
  <div class="button-two"><span>2</span>order and save</div>
  <div...

CSS

body {
  position: relative;
  background-color: hsla(20, 20%, 75%, 1);
}
.buttons {
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  flex: 1;
  width: 100%;
}
.button-one,
.button-two,
.button-three {
  display: flex;
  width: 33.33%;
  padding: 5px;
  font-size:20px;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  background-color: hsla(50, 80%, 50%, 1);
  cursor: pointer;
}
.button-one:hover,
.button-two:hover,
.button-three:hover{
  background-color: hsla(150, 50%, 80%, 1);
}
.buttons span {
  float: left;
  text-align: center;
  width: 50px;
  height: 50px;
  margin-right: 6px;
  font-size:40px;
  background-color: white;
  border-radius: 100%;
}

.fruit-wrapper-info {
  max-height: 150px;
  margin: 100px 0px 40px 0px;
  padding: 6px;
  overflow-y: scroll;
  background-color: white;
}

.fruit-wrapper-title {
  padding-left: 10px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 0%, 20%, 1);
}

.fruit-entry {
  padding: 10px;
  background-color: hsla(0, 0%, 60%, 1);
}
.fruit-entry:nth-child(even) {
  background-color: hsla(0, 0%, 50%, 1);
}

.resave-tester-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 60%;
  border: solid black 5px;  
}

JavaScript

// function to save object to local storage
function saveObjectToLocalStorage(key, object) {
  object = JSON.stringify(object);
  window.localStorage.setItem(key, object);
}
// function to get object from local storage
function getObjectFromLocalStorage(key) {
  var saved = window.localStorage.getItem(key);
  if (saved) {
    return JSON.parse(saved);
  } else {
    return null;
  }
}
function alerter() {
	alert('function works');
}

// button 1
$('.button-one').click(function() {
  if (localStorage.getItem('fruitHistory') === null) {
    alert('something');
    // for first timers with no local storage items we will create a new one
    var fruitObject = {};
    // save it
    saveObjectToLocalStorage('fruitHistory', fruitObject);
    // bring it back
    var fruitObject = getObjectFromLocalStorage('fruitHistory');
    // loop through each entry starting from first one in dom and save to local storage
	  $('.fruit-entry').each(function(index) {
			// create variables based on current element
			var getId = $(this).attr('id');
			var getDate = $(this).find('.date').html();
			var getFruit = $(this).find('.fruit').html();
			var getWeight = $(this).find('.weight').html();
			// create object
			fruitObject[getId] = {
				id: getId,
				date: getDate,
				fruit: getFruit,
				weight: getWeight,
			};
      saveObjectToLocalStorage('fruitHistory', fruitObject);
	  }); // end each
  } else { // end if, begin else if already an entry just add straight to it
    var fruitObject = getObjectFromLocalStorage('fruitHistory');
    $('.fruit-entry').each(function(index) {
			// create variables based on current element
			var getId = $(this).attr('id');
			var getDate = $(this).find('.date').html();
			var getFruit = $(this).find('.fruit').html();
			var getWeight = $(this).find('.weight').html();
			// create object
      fruitObject[getId] = {
        id: getId,
        date: getDate,
        fruit: getFruit,
        weight: getWeight,
      };
     ...