websiteStorage/webStorage.html at main · nonsonebo/websiteStorage · GitHub

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
<!DOCTYPE html>
<html manifest="website.manifest" lang="en" dir="ltr">

<head>
	<title>Web storage | HTML5</title>
	<link rel="icon" href="favicon.jpg">

	<meta name="title" content="Web storage | HTML5">
	<meta name="description" content="This is our class on Web storage in HTML5">
	<meta name="keywords" content="Cheap computer education in Enugu,Computer scholarships in Nigeria">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/table2.css">
	<link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
	<h1>JavaScript sessionStorage and localStorage</h1>
<h2>Demonstrating localStorage</h2>
<form method="get" action="" name="form">
	<table>
		<tr>
			<td><label>Item</label></td>
			<td><input type="text" name="item"></td>
		</tr>
		<tr>
			<td><label>Color</label></td>
			<td><input type="text" name="color"></td>
		</tr>
		<tr>
			<td><label>Quantity</label></td>
			<td><input type="number" name="quantity"></td>
		</tr>
		<tr>
			<td><label>Price</label></td>
			<td><input type="number" name="price"></td>
		</tr>
		<tr>
			<td colspan="2"><input class="default btnHover" type="button" name="submit" value="SUBMIT" onclick="localS();"></td>
		</tr>
	</table>
</form>
<h2>Your submitted values are shown below</h2>
<ul>
	<li>ITEM: <span class="it"></span></li>
	<li>COLOR: <span class="co"></span></li>
	<li>QUANTITY: <span class="quant"></span></li>
	<li>PRICE: <span class="pr"></span></li>
</ul>

<h4 class="error" style="color:brown; position:absolute;bottom:0;"></h4>
<!--
<h6>The quantity of television bought is<span></span></h6> -->
	<script type="text/javascript">
		sessionStorage.setItem("Item","Television");
		sessionStorage.setItem("Color","Black");
		sessionStorage.setItem("Quantity",1000);
		sessionStorage.setItem("Price",50000);

		/*sessionStorage.removeItem("Price");
		sessionStorage.clear();*/

		//let c = sessionStorage.getItem("Quantity");

		//document.querySelector('span').innerHTML=c;
	</script>

	<script type="text/javascript">

		function localS(){
		let fiv = form.item.value;
		let fcv = form.color.value;
		let fqv = form.quantity.value;
		let fpv = form.price.value;

		localStorage.setItem("Item",fiv);
		localStorage.setItem("Color",fcv);
		localStorage.setItem("Quantity",fqv);
		localStorage.setItem("Price",fpv);

		document.querySelector('.it').innerHTML = fiv;
		document.querySelector('.co').innerHTML = fcv;
		document.querySelector('.quant').innerHTML = fqv;
		document.querySelector('.pr').innerHTML = fpv;
}


		/*localStorage.removeItem("Price");
		localStorage.clear();*/

		if(('localStorage' in window) && window['localStorage']!==null){
			document.querySelector('.error').innerHTML='LocalStorage is supported by your browser';
			/*alert('LocalStorage is supported by your browser');*/
		}
		else{
			document.querySelector('.error').innerHTML='LocalStorage is not supported by your browser';
			/*alert('LocalStorage is not supported by your browser')*/
		}
	</script>
</body>
</html>