AdamGerthel/localstorage.html

## localstorage.html
<!doctype html>
<html>
  <head>
    <title>Local Storage Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
      body {
        font-family: arial;
      }
    </style>
  </head>
  <body>
    <h1>Local Storage</h1>
    <div class="form">
      <input type="text" placeholder="To do" class="todo"/>
      <button>Store</button>
    </div>
    <ul>
    </ul>
    <script type="text/javascript">
      $(document).ready(function() {

        // Build our todo list
        var buildTodoList = function(data) {
          $('ul').find('li').remove();
          for(i = 0; i < data.length; i++) {
            $('ul').append('<li>' + data[i] + '</li>');
          }
        };

        // Define the array where we store todos
        if (localStorage["todos"]) {
          var todos = JSON.parse(localStorage["todos"]);
          buildTodoList(todos);
        } else {
          var todos = []
        };

        // Handle new todos
        $('.form button').click(function() {
          // Get the value from the input field
          var value = $(this).parent('.form').find('input').val();
          todos.push(value)
          localStorage["todos"] = JSON.stringify(todos);
          buildTodoList(todos);
        });

      });
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Local Storage Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	<style>
	body {
	font-family: arial;
	}
	</style>
	</head>
	<body>
	<h1>Local Storage</h1>
	<div class="form">
	<input type="text" placeholder="To do" class="todo"/>
	<button>Store</button>
	</div>
	<ul>
	</ul>
	<script type="text/javascript">
	$(document).ready(function() {

	// Build our todo list
	var buildTodoList = function(data) {
	$('ul').find('li').remove();
	for(i = 0; i < data.length; i++) {
	$('ul').append('<li>' + data[i] + '</li>');
	}
	};

	// Define the array where we store todos
	if (localStorage["todos"]) {
	var todos = JSON.parse(localStorage["todos"]);
	buildTodoList(todos);
	} else {
	var todos = []
	};

	// Handle new todos
	$('.form button').click(function() {
	// Get the value from the input field
	var value = $(this).parent('.form').find('input').val();
	todos.push(value)
	localStorage["todos"] = JSON.stringify(todos);
	buildTodoList(todos);
	});

	});
	</script>
	</body>
	</html>