Created
November 12, 2012 00:36
-
-
Save steinbring/4056935 to your computer and use it in GitHub Desktop.
How to store values in localStorage (a persistent place to store data in JavaScript)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Not a bad suggestion. Add a third example, I shall. Thanks.