Data – Today, it is the most important and valuable entity on the web.

The most common way to store data is database, but what if you don’t have a lot of data to store?
Database proves to be an overhead in that case. So, what we should use then?

Well, the answer is HTML5’s Local Storage. It is also known as persistent storage because it lasts longer than sessions.

Local Storage was introduced by W3C. HTML5 uses browsers local storage to store data.

The major advantage of local storage is that data lasts even after the page is closed and re-opened.



Idea Of The App:

Features

Performs CRUD Operations

  1. Create : Creates a new key/value pair in the local storage.
  2. Read : Reads all data of the local storage and display it in the table.
  3. Update : Updates any value associated with any key.
  4. Delete : Deletes a key value pair from the local storage.
  5. Clear All : It empties local storage.

Technologies Used

jQuery Mobile : For Interface / UI Designing

  • We’re going to use jQuery Mobile for designing interface.

Let’s Take a look at the Local Storage.

Local Storage

  • Local Storage store data in key/value pairs.
  • Storage limit is 2MB-10MB per domain/per website.
  • CRUD operations are performed by using key.
  • Data is actually stored as a string.

Methods

  • key(n) : It returns the nth number of key in the local strorage.
    localStorage.key(n)
  • getItem(Key) : It returns the value stored at the key ‘Key’. Returns null when key is not found.
    localStorage.getItem(key)
  • setItem(key, value) : It sets a new key with the given value.
    localStorage.setItem()
  • removeItem(key) : It removes the key/value pair with the key ‘Key’.
    localStorage.removeItem(key)
  • clear() : It clears all key/value pairs from the local storage completely.
    localstorage.clear()

Attribute

  • length : It is used to determine the length of total number of keys stored in local storage.
    localstorage.length

Quota On Different Browsers:

Mobile:

Chrome Android Browser Firefox Safari iOS WebView
 Version 40 4.3 34 8 8
Local Storage 10MB 2MB 10MB 5MB 5MB

Desktop:

Chrome Firefox Safari IE IE
 Version 40 34 8 8 9,10
Local Storage 10MB 10MB 5MB 10MB 10MB

Where you can find local storage?

Suppose you want to see the local storage of any website. You need to follow the following steps:

  1. You need to press F12 key from your keyboard. Then click on resources
    Local storage after f12
  2. After that you need to click on local storage on the left panel.
    local storage resources
  3. Now you need to choose the website from the local storage and the key/value pairs associated with that website will be displayed.
    local storage key value

Files :

HTML File : Index.html

<!DOCTYPE html>
<html>
<head>

<!--Stylesheet Files : jQuery Mobile CSS File, Customized CSS File and Font Awesome for icons -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/my.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--jQuery File : Library, Mobile Library and Customized JS File -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/my.js"></script>
</head>

<!--Beginning of the Body-->
<body onload="show()">
<div data-role="page">

<!--Header Bar-->
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<h1>Store Me</h1>
</div>

<!--Beginning of the Name and Email Field Div-->
<div data-role="main" class="ui-content" id="main">
<center><p id="heading">CRUD Operations Using Local Storage</p></center>
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<center><label for="text-basic">Name</label></center>
<input type="text" name="text-basic" id="name" placeholder="Name">
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<center><label for="text-basic">Email</label></center>
<input type="text" name="text-basic" id="email" placeholder="Email">
</div></div>
</div>
<!--End of the Name and Email Field Div-->

<!--Beginning of the Create and Clear All Div-->
<fieldset class="ui-grid-a" id="btndiv">
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<a href="#" id ="bt" onclick="create()">
<center><i class="fa fa-pencil">Create</i></center>
</a></div>
</div>
<!--End of the Create and Clear All Button Div-->

<!--Dialog Box when clicked on Clear All button-->
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<a id ="bt" href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow " >
<center><i class="fa fa-scissors"> Clear All</i></center>
</a></div>
</div>
</fieldset>
<div data-role="popup" id="popupDialog" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Clear All?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to clear local storage?</h3>
<center><b><p>This action cannot be undone.</p></b></center>
<center> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow" onclick="clearall()">Yes! I'm Sure</a><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a></center>
</div>
</div>
<!-- End of the Clear All Dialog Box-->

<!--Table Displaying Key/Value Pairs-->
<table data-role="table" data-mode="reflow" class="ui-responsive ui-shadow" id="myTable">
</table>

<!--Dialog Box when clicked on update button-->
<div data-role="main" class="ui-content">
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>Update</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post">
<div class="ui-field-contain">
<table id="utable">
<tr>
<td><label for="name">Name:</label></td>
<td><input disabled="disabled" type="text" name="name" id="uname" placeholder="Name" value=""></td>
</tr>
<tr>
<td><label for="email">New Email:</label></td>
<td><input type="email" name="email" id="uemail" placeholder="Enter Your New Email"></td>
</tr>
</table>
</div>
<center><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" onclick="update()" data-transition="flow">Update</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
</center>
</form>
</div>
</div>
</div>
</div>
<!--End of the Update Dialog Box -->

</body>
<!--End of the Body-->
</html>

JavaScript File : My.js

$(document).on('click', '.update', function(){
var data = $(this).attr('data-custom');
$("#uname").val(data);
} );

<!--Method to create new key/value pair in the local storage-->
function create(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (typeof(Storage) !== "undefined") {

<!--Local Storage's SetItem Method-->
localStorage.setItem(name, email);
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
show();
}

<!--Display all key/value pairs in a table-->
function show(){
var key = "";

<!--Display the table head-->
var pair="<tr><th data-priority=\"1\"><center>Name</center></th><th data-priority=\"2\"><center>Email</center></th><th><center>Update</center></th><th><center>Delete</center></th></tr>";
var i=0;

<!--Localstorage.length to get the number of keys in the local storage-->
for (i=0; i<=localStorage.length-1; i++) {

<!--Localstorage.key() to determine the particular key-->
key = localStorage.key(i);

<!--Displaying local storage data in the table-->
pair += "<tr><td><center>"+key+"</center></td><td><center>"+localStorage.getItem(key)+"</center></td><td><a class=\"update\" href=\"#myPopupDialog\" data-custom="+"'"+ key+ "'" +"data-rel=\"popup\" data-position-to=\"window\" data-transition=\"pop\"><center><i class='fa fa-pencil-square-o'></i></center></a></td><td><a onclick=\"del("+"'"+ key+ "'" +")\"><center><i class='fa fa-trash'></i></center></a></td></tr>";
}
if (pair == "<tr><th>Name</th><th>Email</th></tr>") {
pair += "<tr><td><i>empty</i></td><td><i>empty</i></td></tr>";
}
document.getElementById('myTable').innerHTML = pair;
}

<!--Method to update the value for any key in the local storage-->
function update(){
var name = document.getElementById("uname").value;
var email = document.getElementById("uemail").value;
if (typeof(Storage) !== "undefined") {
localStorage.setItem(name, email);
}
show();
}

<!--Method to clear all data from the local storage-->
function clearall(){
localStorage.clear();
show();
}

<!--Method to delete a key/value pair from the local storage-->
function del(name){
localStorage.removeItem(name);
show();
}

CSS File : My.css

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
border: 1px solid #005994 !important;
background: #0093EA !important;
color: #fff !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover{
border: 1px solid #007dcd;
background: #333 ;
font-weight: bold;
text-shadow: 0 0 #eee !important;
color: #fff !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA ), to( #0093EA ));
background-image: -webkit-linear-gradient( #0093EA , #0093EA );
background-image: -moz-linear-gradient( #0093EA , #0093EA );
background-image: -ms-linear-gradient( #0093EA , #0093EA );
background-image: -o-linear-gradient( #0093EA , #0093EA );
background-image: linear-gradient( #0093EA , #0093EA );
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0093EA !important ;
border-color:#0093EA !important;
color: #fff ;
text-shadow: 0 1px 0 #005599 ;
}
img{
padding: 25px;
}
button.ui-btn, .ui-controlgroup-controls button.ui-btn-icon-notext {
border-radius: 5px !important;
}
#searchbutton{
margin-bottom: 25px;
}
#main{
margin-top: 12% !important ;
}
.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content
{
background-color: #ddd;
color: #111;
}
.ui-collapsible-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
//height: 2em;
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
#bt i{
font-weight: bold;
}
th {
border-bottom: 1px solid #d6d6d6 !important;
}
tr:nth-child(even) {
background: #e9e9e9 !important;
}
.ui-table {
margin-top: 5% !important;
border: 1px solid grey !important;
border-radius: 5px !important;
border-collapse: initial !important;
}
label{
font-weight: bold !important;
}
#label{
border: 1px solid #0093EA !important;
background: #fff !important;
color: #005994 !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
#utable tr:nth-child(even){
background: inherit !important;
}
#heading{
font-weight: bold;
font-size: 40px;
}
#btndiv{
margin-top: 3%;
}
@media ( max-width: 35em ) {
.ui-table-reflow.ui-responsive td,
.ui-table-reflow.ui-responsive th {
width: auto;
float: none;
clear: none;
display: table-cell;
margin: 0;
padding:0;
}
}
#btndiv .ui-bar-a{
width: 50% !important;
margin: auto !important;
}

Conclusion:

So, I hope you have a fine idea of how to use browser’s local storage and using it in your app. It is one of the useful feature one can use to avoid unnecessary server load. Hope it will help you and enhance your skill for good.

Recommended blogs –