-
Notifications
You must be signed in to change notification settings - Fork 0
/
shoping cart.html
144 lines (137 loc) · 4.78 KB
/
shoping cart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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="dcwebmakers.com">
<script src="Storage.js"></script>
<link rel="stylesheet" href="StorageStyle.css">
</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()">
window.load=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 <= localStorage.length-1; i++) {
key = localStorage.key(i);
list += "<tr><td>" + key + "</td>\n<td>"
+ localStorage.getItem(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.
document.getElementById('list').innerHTML = list;
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
}
}
<input type="button" value="Save" onclick="SaveItem()">
<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()">
localStorage.myProperty="myValue";
delete localStorage.myProperty;
localStorage.setItem('propertyName','value');
localStorage.getItem('propertyName');
localStorage.removeItem('propertyName');
function SaveItem() {
var name = document.forms.ShoppingList.name.value;
var data = document.forms.ShoppingList.data.value;
localStorage.setItem(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();
localStorage.setItem(name, data);
doShowAll();
}
//Change an existing key-value in HTML5 storage.
function ModifyItem() {
var name1 = document.forms.ShoppingList.name.value;
var data1 = document.forms.ShoppingList.data.value;
//check if name1 is already exists
//Check if key exists.
if (localStorage.getItem(name1) !=null)
{
//update
localStorage.setItem(name1,data1);
document.forms.ShoppingList.data.value = localStorage.getItem(name1);
}
doShowAll();
}
function ModifyItem() {
var name1 = $("#name").val();
var data1 = $("#data").val();
//Check if name already exists.
//Check if key exists.
if (localStorage.getItem(name1) !=null)
{
//update
localStorage.setItem(name1,data1);
var new_info=localStorage.getItem(name1);
$("#data").val(new_info);
}
doShowAll();
}
function ModifyItem() {
var name1 = $("#name").val();
var data1 = $("#data").val();
//Check if name already exists.
//Check if key exists.
if (localStorage.getItem(name1) !=null)
{
//update
localStorage.setItem(name1,data1);
var new_info=localStorage.getItem(name1);
$("#data").val(new_info);
}
doShowAll();
}