One of the key feature in HTML5 is ability to store data on the local machine is known as data storage. Html 5 data storage is an extension of the already existing cookie mechanism. There are two types of storages one is session storage and another is local storage. These two types share same methods and properties but the difference is how long data is stored. In either case both types are origin depended which means the data we treat must be from the same source or the same server. The data is stored as items. Items are nothing but key/value pairs.
List of Very Useful methods.
getItem(key): we can get the value using this method.
setItem(key, value): we can set key and value using this method.
Length: To find how many items are in session storage.
Key(index): Used to find a particular value.
removeItem(key): To delete single item.
Clear: If you wish to clear the saved items then use the clear().
Session storage: It lasts as long its page or tap is open. It is tied to window or tab.
home.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009B57;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
font-weight: bold;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="DataStorage.js"></script>
</head>
<body>
<div style="padding-top:200px" align="center">
<table width="432" align="center" cellpadding="5" cellspacing="1"
style="border:1px solid #009B57">
<tr>
<td colspan="5"><div align="center"><h4>HTML5 SESSION STORAGE AND LOCAL
STORAGE EXAMPLE </h4></div></td>
</tr>
<tr>
<td colspan="3"><span>Key</span></td>
<td width="56"><span class="style1">:</span></td>
<td width="166">
<label>
<input type="text" name="key" id="key" />
</label>
</td>
</tr>
<tr>
<td colspan="3"><span>Value</span></td>
<td><span class="style2"><strong>:</strong></span></td>
<td>
<label>
<input type="text" name="value" id="value" />
</label>
</td>
</tr>
<tr>
<td width="62">
<input type="button" name="save" id="save" value="Save" />
</td>
<td width="68">
<input type="button" name="retrieve" id="retrieve" value="Retrieve" />
</td>
<td width="56">
<input type="button" name="delete" id="delete" value="Delete" />
</td>
<td>
<input type="button" name="review" id="review" value="Review" />
</td>
<td>
<input type="button" name="clear" id="clear" value="Clear" />
</td>
</tr>
</table>
<section id="data" style="padding: 15px;
border: 1px solid #009B57; width:432px">
No data
</section>
</div>
</body>
</html>
DataStorage.js
function save()
{
var key = $('#key').val();
var value = $('#value').val();
sessionStorage[key] = value;
$('#data').html('Item is Saved');
}
function retrieve()
{
var key = $('#key').val();
var value = sessionStorage[key];
$('#data').html( '' + key + ': ' + value + '');
}
function deleteItem()
{
if (confirm('Delete?'))
{
var key = $('#key').val();
sessionStorage.removeItem(key);
$('#data').html('Item is deleted.');
}
}
function reviewListOfItems()
{
var p='';
for(var i = 0; i < sessionStorage.length; i++)
{
var key = sessionStorage.key(i);
var value = sessionStorage[key];
p=key+" "+value+''+p;
}
$('#data').html( '' +p+'');
}
function clearAllItems()
{
if (confirm('Do u want to clear?'))
{
sessionStorage.clear();
$('#data').html('Items are cleared.');
}
}
$(document).ready(function(){
$('#save').click(function(){
save();
});
$('#retrieve').click(function(){
retrieve();
});
$('#delete').click(function(){
deleteItem();
});
$('#review').click(function(){
reviewListOfItems();
});
$('#clear').click(function(){
clearAllItems();
});
});
Local storage: It is persisted on the hardware. Local storage: There is a potential problem with session storage that is the storage is limit if u close the tab or browser the data is lost when the session is lost we can solve this with the local storage.
Dont worry about local storage example just copy the above code and replace with localStorage where we have sessionStorage.
for example:
function save()
{
var key = $('#key').val();
var value = $('#value').val();
localStorage[key] = value;
$('#data').html('
Item is Saved
');
}
This was really helpful!
ReplyDelete