Merge 88ccf416e3 into f478ca2c9d
This commit is contained in:
Sanusi Abdulkadir
GitHub
commit
7f726fd798
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>HTML5 localStorage Example</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="StorageStyle.css">
|
||||
<script src="Storage.js"></script>
|
||||
</head>
|
||||
<body onload="doShowAll()">
|
||||
<h1>Enter Items And Quantity</h1>
|
||||
<form name=ShoppingList>
|
||||
<div id="PlayArea">
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>Item:</b><input type=text name=name></td>
|
||||
<td><b>Quantity:</b><input type=text name=data></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type=button value="Save" onclick="SaveItem()">
|
||||
<input type=button value="Modify" onclick="ModifyItem()">
|
||||
<input type=button value="Remove" onclick="RemoveItem()">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="items_table">
|
||||
<h2>Shopping List</h2>
|
||||
<table id=list></table>
|
||||
<p>
|
||||
<label><input type=button value="Clear" onclick="ClearAll()">
|
||||
<i>* Removes all items</i></label>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
</> HTML5 LOCAL STORAGE</>
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Hello World!
|
||||
Welcome to my HTML5 hactoberfest open source contribution
|
||||
I created this project (HTML5 Local Storage) as a new tip and trick on session
|
||||
storage
|
||||
The project consits of 3 files (html,css and javascript)
|
||||
|
||||
Do fork the entire project and contribute
|
||||
thank you
|
||||
# my github repo https://githhub.com/sanusisusi
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
function SaveItem() {
|
||||
|
||||
var name = document.forms.ShoppingList.name.value;
|
||||
var data = document.forms.ShoppingList.data.value;
|
||||
localStorage.setItem(name, data);
|
||||
doShowAll();
|
||||
|
||||
}
|
||||
|
||||
function ModifyItem() {
|
||||
var name = document.forms.ShoppingList.name.value;
|
||||
document.forms.ShoppingList.data.value = localStorage.getItem(name);
|
||||
doShowAll();
|
||||
}
|
||||
|
||||
function RemoveItem() {
|
||||
var name = document.forms.ShoppingList.name.value;
|
||||
document.forms.ShoppingList.data.value = localStorage.removeItem(name);
|
||||
doShowAll();
|
||||
}
|
||||
|
||||
function ClearAll() {
|
||||
localStorage.clear();
|
||||
doShowAll();
|
||||
}
|
||||
|
||||
// dynamically draw the table
|
||||
|
||||
function doShowAll() {
|
||||
if (CheckBrowser()) {
|
||||
var key = "";
|
||||
var list = "<tr><th>Name</th><th>Value</th></tr>\n";
|
||||
var i = 0;
|
||||
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 (list == "<tr><th>Name</th><th>Value</th></tr>\n") {
|
||||
list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
|
||||
}
|
||||
document.getElementById('list').innerHTML = list;
|
||||
} else {
|
||||
alert('Cannot store shopping list as your browser do not support local storage');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Checking the browser compatibility.
|
||||
*
|
||||
* Alternately can use Modernizr scripts- JavaScript library that helps us to
|
||||
* detect the browser support for HTML5 and CSS features Example - <script
|
||||
* type="text/javascript" src="modernizr.min.js"></script>
|
||||
*
|
||||
* if (Modernizr.localstorage) { //use localStorage object to store data } else {
|
||||
* alert('Cannot store user preferences as your browser do not support local
|
||||
* storage'); }
|
||||
*/
|
||||
function CheckBrowser() {
|
||||
if ('localStorage' in window && window['localStorage'] !== null) {
|
||||
// we can use localStorage object to store data
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
td,th {
|
||||
font-family: monospace;
|
||||
padding: 4px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#PlayArea {
|
||||
border: 1px dotted blue;
|
||||
padding: 6px;
|
||||
background-color: #ccc;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
#items_table {
|
||||
border: 1px dotted blue;
|
||||
padding: 6px;
|
||||
margin-top: 12px;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
#items_table h2 {
|
||||
font-size: 18px;
|
||||
margin-top: 0px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
Loading…
Reference in New Issue