Skip to content

Instantly share code, notes, and snippets.

@steinbring

steinbring/StoreArraysInLocalStorage-Part1.html

Created November 12, 2012 00:36
Show Gist options
  • Save steinbring/4056935 to your computer and use it in GitHub Desktop.
Save steinbring/4056935 to your computer and use it in GitHub Desktop.
Download ZIP
How to store values in localStorage (a persistent place to store data in JavaScript)
Raw
StoreArraysInLocalStorage-Part1.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Experiment into client-side value storage</title>
<script type="text/javascript">
// Does your browser support localstorage?
if(typeof(Storage)=="undefined")
{
// If not, say so.
alert('Your browser does not support html5 localstorage');
}
// Create an array of coffees
var coffees = [];
coffees[0] = 'Mocha';
coffees[1] = 'Americano';
coffees[2] = 'Black';
// Store the coffees within localstorage
localStorage.coffees = JSON.stringify(coffees);
// Get the values out again
var myCoffees = JSON.parse(localStorage.coffees);
// Loop through the array
for (var i = 0; i < myCoffees.length; i++) {
// Print the coffee to the browser console
console.log(myCoffees[i]);
}
</script>
</head>
<body>
</body>
</html>
Raw
StoreArraysInLocalStorage-Part2.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Experiment into client-side storage</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form method="post">
<input id="newCoffee" name="newCoffee" type="text" size="20">
<button onclick="addCoffee($('#newCoffee').val());getCoffees();" type="button">Add New</button>
<button onclick="clearCoffee();getCoffees();" type="button">Clear Coffees</button>
</form>
<ul>
</ul>
<script type="text/javascript">
function getCoffees(){
// Clear the unordered list
$('ul').empty();
// Are there coffees already there? If so, get them.
if(localStorage.coffees != undefined){
// Get the values out of localStorage
var myCoffees = JSON.parse(localStorage.coffees);
// Loop through the array
for (var i = 0; i < myCoffees.length; i++) {
// Add the coffee to the unordered list
$("ul").append('<li>'+myCoffees[i]+'</li>');
}
}
}
function addCoffee(strCoffee){
// Are there coffees already there?
if(localStorage.coffees != undefined){
// Get the existing values out of localStorage
var myCoffees = JSON.parse(localStorage.coffees);
}else{
// Since there were no coffees stored, create a new array
var myCoffees = [];
}
// Add the new coffee
myCoffees[myCoffees.length] = strCoffee;
// Store the coffees within localstorage
localStorage.coffees = JSON.stringify(myCoffees);
}
function clearCoffee(){
// Delete the "coffees" array from localStorage
localStorage.removeItem('coffees');
}
// Populate the initial list of coffees
getCoffees();
</script>
</body>
</html>
Raw
StoreArraysInLocalStorage-Part3.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Experiment into client-side storage</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form method="post">
<input id="newCoffee" name="newCoffee" type="text" size="20">
<button onclick="coffee.add($('#newCoffee').val());coffee.get();">Add New</button>
<button onclick="coffee.clear();coffee.get();">Clear Coffees</button>
</form>
<ul>
</ul>
<script type="text/javascript">
var coffee = {
get : function (){
// Clear the unordered list
$('ul').empty();
// Are there coffees already there? If so, get them.
if(localStorage.coffees != undefined){
// Get the values out of localStorage
var myCoffees = JSON.parse(localStorage.coffees);
// Loop through the array
for (var i = 0; i < myCoffees.length; i++) {
// Add the coffee to the unordered list
$("ul").append('<li>'+myCoffees[i]+'</li>');
}
}
},
add : function(strCoffee){
// Are there coffees already there?
if(localStorage.coffees != undefined){
// Get the existing values out of localStorage
var myCoffees = JSON.parse(localStorage.coffees);
}else{
// Since there were no coffees stored, create a new array
var myCoffees = [];
}
// Add the new coffee
myCoffees[myCoffees.length] = strCoffee;
// Store the coffees within localstorage
localStorage.coffees = JSON.stringify(myCoffees);
},
clear : function(){
// Delete the "coffees" array from localStorage
localStorage.removeItem('coffees');
}
}
// Populate the initial list of coffees
coffee.get();
</script>
</body>
</html>
@bittersweetryan
Copy link

Joe,

Just a quick suggestion to clean this up a bit. A quick and easy solution would be to namespace those functions in another object to reduce the amount of global variables.

var coffeeApp = {
  getCoffees : function(){
    ...
  },

  addCoffee : function(coffee){
      if( typeOf coffee === 'string ){
        .....
    }
  },

  clearCoffee : function(){
  }
}```

@steinbring
Copy link
Author

Not a bad suggestion. Add a third example, I shall. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment