State with LocalStorage

by Jason Crowther

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff2"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<div class="container">
<h1>Maintaining State with LocalStorage</h1>

<p>Change some of the values in the table below and then hit the run button above (this is basically like reload in the browser.)  The field contents are persisted using localStorage on the client.</p>

<table id="partsList" border="1" class="table table-condensed">
  <tr>
    <th>Part</th>
    <th>Quantity</th>
  </tr>
<tbody>
<tr>
    <td><input type="text" class="partNum"></td>
    <td><input type="text" class="quantity"></td>
  </tr>
  <tr>
    <td><input type="text" class="partNum"></td>
    <td><input type="text" class="quantity"></td>
  </tr>
  <tr>
    <td><input type="text" class="partNum"></td>
    <td><input type="text" class="quantity"></td>
  </tr>
  <tr>
    <td><input type="text" class="partNum"></td>
    <td><input...

JavaScript

$(document).ready(function(){
	
  // if was previously saved data, restore it
	if(localStorage.getItem('formState') !== null ) {
  	
    // turn stored json back into a variable
    var formState = JSON.parse(localStorage.getItem('formState'));
    
    // motor through the table to reset the
    // input elements.
    $('#partsList tbody tr').each(function(){
    	var d = formState.shift();
      $(this).find('.partNum').val( d.p );
      $(this).find('.quantity').val( d.q );
    });
  
  }

	// wire up a change handler for all the inputs
	$('#partsList input').change( handleChange );

});

function handleChange() {
	// would do some real work here...
  
  // record the entire current table to localStorage
  saveState();
}

function saveState() {
	// loop through the current table
  // and make an array of hashes for
  // current part/quantity touples
	var d = [];
	$('#partsList tbody tr').each(function(){
  	var p = $(this).find('.partNum').val();
    var q = $(this).find('.quantity').val();
    d.push({ p:p, q:q});
  });
	// save the results to local storage.
	localStorage.setItem('formState',JSON.stringify(d));
}