<!
doctype html>
<html lang="en-US">
<head>
<title>HTML5 Local Storage Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="rating" content="General">
<meta name="expires" content="never">
<meta name="language" content="English, EN">
<meta name="description" content="Shopping cart project with HTML5 and JavaScript">
<meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage">
<meta name="author" content="[Link]">
<script src="[Link]"></script>
<link rel="stylesheet" href="[Link]">
</head>
<form name="ShoppingList">
<fieldset>
<legend>Shopping cart</legend>
<label>Item: <input type="text" name="name"></label>
<label>Quantity: <input type="text" name="data"></label>
<input type="button" value="Save" onclick="SaveItem()">
<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()">
</fieldset>
<div id="items_table">
<h2>Shopping List</h2>
<table id="list"></table>
<label><input type="button" value="Clear" onclick="ClearAll()">
* Delete all items</label>
</div>
</form>
<body onload="doShowAll()">
[Link]=doShowAll();
$( window ).load(function() {
doShowAll();
});
/*
=====> Checking browser support.
//This step might not be required because most modern browsers do support HTML5.
*/
//Function below might be redundant.
function CheckBrowser() {
if ('localStorage' in window && window['localStorage'] !== null) {
// We can use localStorage object to store data.
return true;
} else {
return false;
// Dynamically populate the table with shopping list items.
//Step below can be done via PHP and AJAX, too.
function doShowAll() {
if (CheckBrowser()) {
var key = "";
var list = "<tr><th>Item</th><th>Value</th></tr>\n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= [Link]-1; i++) {
key = [Link](i);
list += "<tr><td>" + key + "</td>\n<td>"
+ [Link](key) + "</td></tr>\n";
//If no item exists in the cart.
if (list == "<tr><th>Item</th><th>Value</th></tr>\n") {
list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
//Bind the data to HTML table.
//You can use jQuery, too.
[Link]('list').innerHTML = list;
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
Run and testing the Cart
<input type="button" value="Save" onclick="SaveItem()">
<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()">
[Link]="myValue";
delete [Link];
[Link]('propertyName','value');
[Link]('propertyName');
[Link]('propertyName');
function SaveItem() {
var name = [Link];
var data = [Link];
[Link](name, data);
doShowAll();
<label>Item: <input type="text" name="name" id="name"></label>
<label>Quantity: <input type="text" name="data" id="data"></label>
function SaveItem() {
var name = $("#name").val();
var data = $("#data").val();
[Link](name, data);
doShowAll();
//Change an existing key-value in HTML5 storage.
function ModifyItem() {
var name1 = [Link];
var data1 = [Link];
//check if name1 is already exists
//Check if key exists.
if ([Link](name1) !=null)
//update
[Link](name1,data1);
[Link] = [Link](name1);
doShowAll();
function ModifyItem() {
var name1 = $("#name").val();
var data1 = $("#data").val();
//Check if name already exists.
//Check if key exists.
if ([Link](name1) !=null)
//update
[Link](name1,data1);
var new_info=[Link](name1);
$("#data").val(new_info);
doShowAll();
function RemoveItem()
var name=[Link];
[Link]=[Link](name);
doShowAll();