Introduction

In this post, we will see some information about IndexedDB. As the name implies, IndexedDB is a database in which we can do all kind of operations we do in a normal database. This IndexedDB has been introduced with the HTML5 . This allows a user to store a large amount of data in user’s browser. It has been proved that IndexedDB is more powerful and efficient than other storage mechanisms like local storage and session storage. Basically, IndexedDB is an API which helps the developers to do some database operations in client side, like creating a database, open the transaction, creating tables, inserting values to tables, deleting values, reading the data. If you need any other way to save some data in client side, you can use storage mechanisms introduced in HTML5. Now we will look some of the operations a developer can do with IndexedDB. I hope you will like this.

Background

Before introducing IndexedDB, developers were familiar with Web SQL. If you need to know more about Web SQL you can see here: Web SQL Introduction.

Why to use IndexedDB instead Web SQL?

W3C has been announced that use of Web SQL is obsolete and deprecated, hence it is not recommended using Web SQL in your applications. Most of the modern web browsers like Mozilla does not support the use of Web SQL, this is also a great limitation of Web SQL.

Now we have an alternative to Web SQL, IndexedDB which more efficient and faster than Web SQL. Below are some of the main advantages of IndexedDB.

Using the code

As you all know, the first step to work with a database is just creating it.

Create/Open IndexedDB Database

It is always better to check whether your browser is supporting IndexedDB or not. To check that you can use the following syntax.

[js]
<script type="text/javascript">
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//check whether the database is created or not.
if (!window.indexedDB) {
alert("Oops, Does not support IndexedDB");
}
</script>
[/js]

So if your browser is supporting IndexedDB, you are ready to go!. Cool!. Now we can create a database.

[js]
//check whether the database is created or not.
if (!window.indexedDB) {
alert("Oops, Does not support IndexedDB");
} else {
//Create database
var dbName = ‘myDB’;// Database name
var dbVersion = 2;// Database version
var crDB = window.indexedDB.open(dbName, dbVersion);
}
[/js]

Here the first parameter is the database name and the second one is the version of your database. A version represents your database’s current schema. If everything goes well, you can see your database in your browser’s resources as follows.

IndexedDB Creation

When you create a database there some certain events are getting fired, they are

onupgradeneeded

[js]
crDB.onupgradeneeded = function (event) {
alert("That’s cool, we are upgrading");
db = event.target.result;
var objectStore = db.createObjectStore("UserName", { keyPath: "UserID" });
};
[/js]

This event gets fired when you try upgrading your database. Here we are creating an object store with name ‘UserName’ and index key ‘UserID’. Below is the output you get when the onupgradeneeded is fired.

IndexedDB onupgradeneeded Alert

IndexedDB onupgradeneeded Output

onsuccess

[js]
crDB.onsuccess = function (event) {
alert("Awesome, You have successfully Opened a Databse!");
db = event.target.result;
}
[/js]

If there are no errors, you will get an alert as follows.

IndexedDB OnSuccess Alert

onerror

[js]
crDB.onerror = function (event) {
alert("Oops, There is error!", event);
}
[/js]

Here crDB is our database instance. Once this is done, we can start using the transaction as we use in SQL.

Creating transaction

To create a transaction we can use the following syntax. We can use transaction method from our database instance.

[js]
//Creating transaction
var myTran = db.transaction(["UserName"], "readwrite");

myTran.oncomplete = function (e) {
alert("Awesome, Transaction is successfully created!");
};

myTran.onerror = function (e) {
alert("Oops, There is error!", e.message);
};
[/js]

Here db is our database instance. And myTran is our transaction object which we are going to use for our upcoming operations. We are creating a transaction with read-write permission, that is why we have given a property as ‘readwrite’ while creating a transaction. Why we use transaction is, as you all know transaction can be rollbacked. For example, if any of the operation throws an error, the transaction will be rollbacked so there won’t be any kind of mismatching data happening. And of course, we can easily manage error logs with the help of transaction. Shall we write queries needed for our operations?

Adding the data

Once our transaction is ready we can insert some data into our object in the transaction on success event, which we have called inside of database onsuccess event. Please check the below code.

[js]
crDB.onsuccess = function (event) {
alert("Awesome, You have successfully Opened a Databse!");
db = event.target.result;

//Creating transaction
var myTran = db.transaction(["UserName"], "readwrite");

myTran.oncomplete = function (e) {
alert("Awesome, Transaction is successfully created!");
};

myTran.onsuccess = function (e) {
alert("Awesome, Transaction is successfully created!");
//Adding the data
var myObj = myTran.objectStore("UserName");

var myNames = ["Sibi", "Aji", "Ansu", "Shantu", "Aghil"];//Array with names

for (var i = 0; i < 5; i++) {//Adding 5 objects
myObj.add({ UserID: ‘SBKL0’ + i, Name: myNames[i] });
}
};

myTran.onerror = function (e) {
alert("Oops, There is error!", e.message);
};

}
[/js]

Here myNames is the array in which we have few names and we are using a loop to insert few data to the object. Now you can see that your data have been added to the object in your browser’s resources.

IndexedDB Adding Data To Objects

We have successfully added data. Right? Now we will see how we can remove the data we just added 🙂

Removing the data

If there is adding, there should be deleting :). You can delete an object from object store as follows.

[js]
setTimeout(function () {
db.transaction(["UserName"], "readwrite").objectStore("UserName").delete(‘SBKL00’);
}, 10000);
[/js]

So you can rewrite the on success event of transaction s follows.

[js]
myTran.onsuccess = function (e) {
alert("Awesome, Transaction is successfully created!");
//Adding the data
var myObj = myTran.objectStore("UserName");

var myNames = ["Sibi", "Aji", "Ansu", "Shantu", "Aghil"];//Array with names

for (var i = 0; i < 5; i++) {//Adding 5 objects
myObj.add({ UserID: ‘SBKL0’ + i, Name: myNames[i] });
}

setTimeout(function () {
db.transaction(["UserName"], "readwrite").objectStore("UserName").delete(‘SBKL00’);
}, 10000);
};
[/js]

It can give you an output as follows.

IndexedDB Deleting Data From Objects

Now we will see how we can access a particular data from the object store.

Access the data with key

To access a particular data, we will add a button and in the button click event, we will fetch the details needed as a request.

[html]
<input id="btnGet" type="button" value="Get Name" />
[/html]

Click event is as follows.

[js]
$(function () {
$(‘#btnGet’).click(function () {
var get = db.transaction(["UserName"], "readwrite").objectStore("UserName").get(‘SBKL01’);
get.onsuccess = function (event) {
alert("The name you have requested is : " + get.result.Name);
};

});
});
[/js]

You can get the alert as follows, if your run your code.

IndexedDB Get The Data With Key

Now we will see how we can update data with the Get method.

Updating the data

To update the data we will have a button and in the button click we will fire the needed code.

[html]
<input id="btnUpdate" type="button" value="Update Name" />
[/html]

And click event is as follows.

[js]
$(‘#btnUpdate’).click(function () {
var updObject = db.transaction(["UserName"], "readwrite").objectStore("UserName");
var upd=updObject.get(‘SBKL03’);
upd.onsuccess = function (event) {
upd.result.Name = ‘New Name’;
updObject.put(upd.result);
};

});
[/js]

Here we are getting an element using the get method, and we are updating the value in the result, once it is done, we will assign that new result to the object store using put method.

It will give you an output as follows.

IndexedDB Update The Data With Key

Another interesting thing is, we can use cursors also as we use in SQL if we need to loop through some data. Here I will show you how we can do that.

Using Cursor

Create a button and write few code as follows.

[html]
<input id="btnShow" type="button" value="Show the data" />
[/html]

Then we will create an HTML table.

[html]
<div id="myTab">
<table id="show">
<thead>
<th>User ID </th>
<th>Name</th>
</thead>
<tbody></tbody>
</table>
</div>
[/html]

Now we can write the cursor as follows.

[js]
$(‘#btnShow’).click(function () {
var curObject = db.transaction(["UserName"], "readwrite").objectStore("UserName");
curObject.openCursor().onsuccess = function (event) { //Opening the cursor
var cur = event.target.result;
if (cur) {// Checks for the cursor
$(‘#show’).append(‘<tr><td>’ + cur.key + ‘</td><td>’ + cur.value.Name + ‘</td></tr>’);
cur.continue();
}
};
$(‘#myTab’).show();
});
[/js]

Here we are creating a cursor using the function openCursor() and in the onsuccess event we are looping through the cursor. You can always give some styles to your table.

[css]
<style>
table, tr, td, th {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
</style>
[/css]

That is all 🙂 Now when you click the show button, you can see the data in a table format as follows.

IndexedDB Using Cursor

Complete code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Introduction to IndexedDB</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var dbName = ‘myDB’;// Database name
var dbVersion = 2;// Database version
var crDB;
var db;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//check whether the database is created or not.
if (!window.indexedDB) {
alert("Oops, Does not support IndexedDB");
} else {
//Create database
crDB = window.indexedDB.open(dbName, dbVersion);
var db;
crDB.onerror = function (event) {
alert("Oops, There is error!", event);
}
crDB.onupgradeneeded = function (event) {
alert("That’s cool, we are upgrading");
db = event.target.result;
var objectStore = db.createObjectStore("UserName", { keyPath: "UserID" });
};
crDB.onsuccess = function (event) {
alert("Awesome, You have successfully Opened a Databse!");
db = event.target.result;

//Creating transaction
var myTran = db.transaction(["UserName"], "readwrite");

myTran.oncomplete = function (e) {
alert("Awesome, Transaction is successfully created!");
};

myTran.onsuccess = function (e) {
alert("Awesome, Transaction is successfully created!");
//Adding the data
var myObj = myTran.objectStore("UserName");

var myNames = ["Sibi", "Aji", "Ansu", "Shantu", "Aghil"];//Array with names

for (var i = 0; i < 5; i++) {//Adding 5 objects
myObj.add({ UserID: ‘SBKL0’ + i, Name: myNames[i] });
}

setTimeout(function () {
db.transaction(["UserName"], "readwrite").objectStore("UserName").delete(‘SBKL00’);
}, 10000);
};

myTran.onerror = function (e) {
alert("Oops, There is error!", e.message);
};

}
}
$(function () {
$(‘#myTab’).hide();
$(‘#btnGet’).click(function () {
var get = db.transaction(["UserName"], "readwrite").objectStore("UserName").get(‘SBKL01’);
get.onsuccess = function (event) {
alert("The name you have requested is : " + get.result.Name);
};

});
$(‘#btnUpdate’).click(function () {
var updObject = db.transaction(["UserName"], "readwrite").objectStore("UserName");
var upd = updObject.get(‘SBKL03’);
upd.onsuccess = function (event) {
upd.result.Name = ‘New Name’;
updObject.put(upd.result);
};

});
$(‘#btnShow’).click(function () {
var curObject = db.transaction(["UserName"], "readwrite").objectStore("UserName");
curObject.openCursor().onsuccess = function (event) { //Opening the cursor
var cur = event.target.result;
if (cur) {// Checks for the cursor
$(‘#show’).append(‘<tr><td>’ + cur.key + ‘</td><td>’ + cur.value.Name + ‘</td></tr>’);
cur.continue();
}
};
$(‘#myTab’).show();
});
});
</script>
<style>
table, tr, td, th {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<input id="btnGet" type="button" value="Get Name" />
<input id="btnUpdate" type="button" value="Update Name" />
<input id="btnShow" type="button" value="Show the data" />
<div id="myTab">
<table id="show">
<thead>
<th>User ID </th>
<th>Name</th>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
[/html]

That is all. We did it. Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web SQL yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

Recently I was going through a situation to create a tool tip for my grid. As we all know there are plenty of plugins are available for the tool tip generation. But I was not ready to go with any plugins for this. So I thought of creating it manually. You might be think this could be done by adding the title attribute to the elements directly, but I had a different situation. I was using a third tool, in which I was forced to include an additional js file, I was not ready to do that. Adding any unwanted js file to your project is a bad habit. So I thought of creating tool tip in the custom way.

Using the code

First of all we will create a page and a html table.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Create Tooltip Without Any Plugins</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<table class="table" border="1" style="width: 100%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>50</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>94</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>80</td>
</tr>
</table>
</body>
</html>

[/html]

Now if you run your page and, you can see the table.

Create Tooltip Without Any Plugins

No we will add our script to the page.

[js]
<script>
$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
</script>
[/js]

Here what we are doing is, we are just appending the title attribute for the td element in the mouseover event. Now run your page, and see our tool tip works perfectly.

Create Tooltip Without Any Plugins

We have done it finally.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Create Tooltip Without Any Plugins</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
</script>
</head>
<body>
<table class="table" border="1" style="width: 100%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>50</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>94</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>80</td>
</tr>
</table>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed?Have you ever faced this issue in your programming life? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

Background

I was creating a page where I have some text boxes, So I wanted to give an alert if user try to get away from the page with out saving the data entered.

Using the code

First of all we will create a page and a html table.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td><input class="text" type="text" /></td>
</tr>
</table>
</body>
</html>

[/html]

Now if you run your page and, you can see the table.

Check for any unsaved changes in page

No we will create a bool variable which will be true when there is an unsaved data.

[js]
var unsaved = false;
[/js]

What next? We will add call to an existing function when user reloads the page. Sounds good?

[js]
window.onbeforeunload = unloadPage;
[/js]

As you can see we are calling a function unloadPage, preceding is the function definition.

[js]
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
[/js]

Now please run your page and type anything in the text box given, then reload your page.
You will get an alert of You have unsaved changes on this page.. Shall we check that?

Check for any unsaved changes in page

We have done it finally.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
var unsaved = false;
$(document).on(‘change’, ‘.table .text’, function () {
unsaved = true;
});

$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
window.onbeforeunload = unloadPage;
</script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>
<input class="text" type="text" /></td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>
<input class="text" type="text" /></td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>
<input class="text" type="text" /></td>
</tr>
</table>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this requirement in your programming life? Does this article helps you in anyway? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can. Have a happy coding!.

Kindest Regards
Sibeesh Venu

Introduction

In this post we well discuss how to remove all local storage and session storage or remove the storage according to the key values, for example, is a key contain a particular string, we will remove that local storage and session storage. We will find all the local storage and session storage first and then we will loop through each, if a user needs to delete a particular storage according to a particular condition, we will delete that storage alone.

Both localStorage and sessionStorage has been introduced with HTML5. If you are new to storage mechanism in client side, you can find out here: Storage In HTML5

Backgroud

I am working in a client-side application where we use localStorage and sessionStorage for saving some key informations. What I mean by key information is, like we store the mail id of the user who uses the application. There I got a requirement of deleting the localStorage and sessionStorage according to the key value. For example, I needed to delete the storage values whose keys start with “logged”. I did the requirement and thought to share with you all. I hope someone will find it is useful.

Using the code

To start with you need to include jquery reference.

[js]
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
[/js]

Now we need to set the localStorage and sessionStorage right?

Add the storage values in the ready event.

[js]
localStorage.setItem("First1","First Local Storage");
sessionStorage.setItem("First1","First Session Storage");
localStorage.setItem("Second1","Second Local Storage");
sessionStorage.setItem("Second1","Second Session Storage");
[/js]

So we have set our localStorage and sessionStorage . Now we need to check whether it is saved or not right? Just run your page and see your browser console.

Now we will add some elements where we can fire the delete events. Cool?

[html]
<a href="#" id="removeAllLocalStorage">Click To Remove All Local Storage</a><br/><br/>
<a href="#" id="removeAllLocalStorageWhichStarts">Click To Remove All Local Storage Which Starts With "First"</a><br/><br/>
<a href="#" id="removeAllSessionStorage">Click To Remove All Session Storage</a><br/><br/>
<a href="#" id="removeAllSessionStorageWhichStarts">Click To Remove All Session Storage Which Starts With "First"</a><br/><br/>
[/html]

Once that is done, we add the click event scripts.

[js]
<script>
$(document).ready(function(){
localStorage.setItem("First1","First Local Storage");
sessionStorage.setItem("First1","First Session Storage");
localStorage.setItem("Second1","Second Local Storage");
sessionStorage.setItem("Second1","Second Session Storage");

$("#removeAllLocalStorage").click(function(){
Object.keys(localStorage)
.forEach(function (key) {
localStorage.removeItem(key);
});
});
$("#removeAllLocalStorageWhichStarts").click(function(){
Object.keys(localStorage)
.forEach(function (key) {
if ((/^First/.test(key))) {
localStorage.removeItem(key);
}
});
});
$("#removeAllSessionStorage").click(function(){
Object.keys(sessionStorage)
.forEach(function (key) {
sessionStorage.removeItem(key);
});
});
$("#removeAllSessionStorageWhichStarts").click(function(){
Object.keys(sessionStorage)
.forEach(function (key) {
if ((/^First/.test(key))) {
sessionStorage.removeItem(key);
}
});
});
});
</script>
[/js]

So everything is set. Now the only pending thing is just run and see the output.

First, we will fire the click event which removes all the local storage. ok?

Once you clicked, you can see all of your local storage items have been removed.

Now we will reload the page and set the storage items again, this time we will fire the event which delete the local storage value which has key starts with “First”.

Once you clicked you can see only the storage element which has key starts with “First” has been removed.

Next, we will fire the click event which removes all the session storage. ok?

Once you clicked, you can see all of your session storage items have been removed.

Now we will reload the page and set the storage items again, this time we will fire the event which deletes the session storage value which has key starts with “First”.

Once you clicked you can see only the session storage element which has key starts with “First” has been removed.

So we have done everything.

Complete Code

[html]
<html>
<head>
<title>Remove all session storage,local storage or remove by key which starts with a particular string – Sibeesh Passion</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<a href="#" id="removeAllLocalStorage">Click To Remove All Local Storage</a><br/><br/>
<a href="#" id="removeAllLocalStorageWhichStarts">Click To Remove All Local Storage Which Starts With "First"</a><br/><br/>
<a href="#" id="removeAllSessionStorage">Click To Remove All Session Storage</a><br/><br/>
<a href="#" id="removeAllSessionStorageWhichStarts">Click To Remove All Session Storage Which Starts With "First"</a><br/><br/>
<div id="body"></div>
<script>
$(document).ready(function(){
localStorage.setItem("First1","First Local Storage");
sessionStorage.setItem("First1","First Session Storage");
localStorage.setItem("Second1","Second Local Storage");
sessionStorage.setItem("Second1","Second Session Storage");

$("#removeAllLocalStorage").click(function(){
Object.keys(localStorage)
.forEach(function (key) {
localStorage.removeItem(key);
});
});
$("#removeAllLocalStorageWhichStarts").click(function(){
Object.keys(localStorage)
.forEach(function (key) {
if ((/^First/.test(key))) {
localStorage.removeItem(key);
}
});
});
$("#removeAllSessionStorage").click(function(){
Object.keys(sessionStorage)
.forEach(function (key) {
sessionStorage.removeItem(key);
});
});
$("#removeAllSessionStorageWhichStarts").click(function(){
Object.keys(sessionStorage)
.forEach(function (key) {
if ((/^First/.test(key))) {
sessionStorage.removeItem(key);
}
});
});
});
</script>

</body>
</html>
[/html]

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this article, we will learn how to use local storage in HTML5. For many years, we developers were depending on the server only for saving the data. And we used to retrieve the data by sending a request to our server and by manipulating some queries we could manage the formation, updating, insertion and so on. Great, we were doing a fantastic job.

But as the day’s passes, we must move on to the next level. Nowadays all are busy in their life, so a person can wait a maximum of a few seconds for a request that he has given in your blog, or website, or in your product. If it takes much time, he/she will just close the window and start searching for an alternative. Am I right?

Yeah, it happens when you are depending completely on the server. For each query, it will take some seconds. Just because of this, we started using the client-side state management techniques, mostly cookies.

But we do have the following issues if we are using cookies also:

The cookies can have only a limited amount of data, which is definitely not enough for us to work on (4096 bytes).
And as the number of requests increases, the data amount in cookies also increase. So at a point in time, we may encounter some performance issues. So in the modern web, we have a new solution, Local Storage.

Source Code

Download the source code here: Local Storage

Background

Currently, I am working on a dashboard application. As you all know a dashboard application must be as fast as possible. It must not make a user wait. So most of our codes are on the client side. So we are storing the necessary data on the client side itself, that makes my app fast. And we are using jQuery.

Using the code

Now we will work on how to save the data in local storage and retrieve it when we need it.

Saving the Data

To save the data we do have a function called setItem(). We can use the following syntax.

[js]
localStorage.setItem(“item”, “http://sibeeshpassion.com/”)
[/js]

Before going for this, you must check that your browser supports this feature since this is only applicable to modern browsers.

To check whether it supports it or not:

[js]
if (localStorage) {
}
else {
$(“#showitem”).text(“your browser does not support this feature”);
}
[/js]

Retrieving the data from local storage

We can use the getItem() function to retrieve the data from the local storage.

Please see the following syntax.
[js]
var itm = localStorage.getItem(“item”);
[/js]

Great, you have it. Congratulations.

Now we will work on how to remove this item from local storage.

Removing data from the local storage

To remove the data form the local storage, please see the following syntax.
[js]
localStorage.removeItem(“item”);
[/js]

Removing the all data from localStorage

To remove the data form the localStorage, please see the following syntax.
[js]
localStorage.clear();
[/js]

Demo

Here we will create 3 buttons and one h2 tag as in the following markup.

[html]
<input type=“submit” id=“setitem” value=“set Item” />
<input type=“submit” id=“getitem” value=“get Item” />
<input type=“submit” id=“removeitem” value=“remove Item” />
<h2 id=“showitem”></h2>
[/html]

Now we will add the jQuery reference.

[js]
<script src=“jquery-1.11.1.min.js”></script>
[/js]

Set the Item

[js]
$(“#setitem”).click(function () {
localStorage.setItem(“item”, “http://sibeeshpassion.com/”)
});
[/js]

Once you set the item to localStorage, you can see it in your browser. To see it, press F12 after pressing the set Item button, then go to the resources tab.

Figure: Prior to setting the item

Figure: After setting the item

Get the Item

[js]
$(“#getitem”).click(function () {
var itm = localStorage.getItem(“item”)
$(“#showitem”).text(itm);
});
[/js]

Remove the Item

[js]
$(“#removeitem”).click(function () {
localStorage.removeItem(“item”);
$(“#showitem”).text(”);
});
[/js]

Complete Code

[html]
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Use Of Local Storage – Sibeesh|Passion</title>
<script src=“jquery-1.11.1.min.js”></script>
<script>
$(function () {
if (localStorage) {
$(“#setitem”).click(function () {
localStorage.setItem(“item”, “http://sibeeshpassion.com/”)
});
$(“#getitem”).click(function () {
var itm = localStorage.getItem(“item”)
$(“#showitem”).text(itm);
});
$(“#removeitem”).click(function () {
localStorage.removeItem(“item”);
$(“#showitem”).text(”);
});
}
else {
$(“#showitem”).text(“your browser does not support this feature”);
}
});
</script>
</head>
<body>
<input type=“submit” id=“setitem” value=“set Item” />
<input type=“submit” id=“getitem” value=“get Item” />
<input type=“submit” id=“removeitem” value=“remove Item” />
<h2 id=“showitem”></h2>
</body>
</html>
[/html]

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

• Client-Side Chart Widget in HTML 5: Part 1 (Bar Chart)
• Client-Side Chart Widget in HTML 5: Part 2 (Pie Chart)
• Client-Side Chart Widget in HTML 5: Part 3 (Line Chart)
• Client-Side Chart Widget in HTML5: Part 4 (Doughnut Chart)

Now we will explain a client-side Doughnut Chart widget in HTML5.

Background

Please download the necessary files here http://www.chartjs.org/.

Using the code

A simple HTML

Included JavaScript file

Call the Chart Function

Here we are loading the chart in the myChart.

As you can see in the preceding code, polarChartData is the data we will load into the chart.

Properties

• value
• color
• highlight
• label

Here you can change the properties as you want.

Complete HTML

Conclusion

I hope you can now create your own chart.

Output

Hi all, I hope you are fine. I hope you have read my first part of this series that explains about loading the Bar Chart. Today we will explain a client-side Pie Chart widget in HTML5.

Background

As you need, you need to download the files. Please download the necessary files from here.

Using the code

A simple HTML

Included JavaScript file

Call the Chart Function

Here we are loading the chart in myChart.

As you can see in the preceding code, pieChartData is the data we will load into the chart.

Properties

• value
• color
• highlight
• label

Here you can change the properties as you want.

Complete HTML

Conclusion

I hope you can now create your own chart.

Output

Background

For the past few months I have been working in a dashboard application, so I encountered a situation to work with a Combo chart in my application. As I began working with the Combo chart, when I finished the work I got a new requirement that a Pie chart must be draggable in the chart area. So I thought of working on that and share it with you all.

What we need first

Include the necessary JavaScript files and UI elements as follows.

Combo chart configuration

Our next step is to configure the Combo chart. You can determine the configuration here.

Please note that I have given the Pie chart as a separate chart so that we can make it draggable as follows.

You can determine the demo here: http://jsfiddle.net/sibeeshvenu/oc1mn8ru/4/

Output

Now if you run this configuration you will get output as follows.

Now the interesting fact is, you can drag the pie to where ever you want it.

Conclusion

I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards,

Sibeesh Venu
Sibeesh Passion

Introduction

This article explains what is the basic difference between HTML 5 local storage and session storage. Basically, both session storage and local storage are part of storage mechanism which is introduced with HTML5. By using these two, we can store information on client side itself. I hope you will like it.

If you are new to the term local storage, I recommend you to read my article here: Local Storage

Basic scenario where you can use

If you need to carry a value throughout your application or throughout your pages, you can use local storage. For example, we can store a logged-in username in local storage that we may need to access all the pages. I strongly recommend to not store any secured data (for example a “password”) in local storage.

In some scenario, we may need to set a key element depending on the pages we have in the application. For example, if we need to store the page name (any key element that may be different).
So let’s start

Using the code

Here in my application, I have added two HTML5 pages.

HtmlPage1.html
HtmlPage2.html

In HtmlPage1.html I have set local storage and session storage, now I am trying to access that in HtmlPage2.html. Please see the following source.

HtmlPage1.html
[html]
<!DOCTYPE html>
<html
xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Difference between local storage and session storage</title>
<script>
localStorage.setItem(“myKey”, 1);
sessionStorage.setItem(“myKey”, 1);
var myVal = localStorage.getItem(“myKey”);
alert(“My local storage value is : ” + myVal);
alert(“My session storage value is : ” + sessionStorage.getItem(“myKey”));
</script>
</head>
<body>
</body>
</html>
[/html]

HtmlPage2.html
[html]
<!DOCTYPE html>
<html
xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Difference between local storage and session storage</title>
<script>
var myVal = localStorage.getItem(“myKey”);
alert(“My local storage value is : ” + myVal);
alert(“My session storage value is : ” + sessionStorage.getItem(“myKey”));
</script>
</head>
<body>
</body>
</html>
[/html]

When you run the first page, in the browser console you will see as in the following image.

Figure: Local Storage

Figure: Session Storage

Now it is time to run the second page. Once you run that please check in the console. You can see as follows.

Figure: Local storage

Figure: Session storage

Please note that session storage is null. You can see the session storage only if you set it on that running page.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

I am working in a dashboard application, where you can find many charts, maps and grids and so on. If you work with a chart, you will definitely know the word series . Previously we were applying the color for every series separately, in other words the user must select the color for each series or it will take some default color. Your user may think this process is too much work. Here I am providing a custom color palette control.

Download Source Code

Custom Colour Palette

Why

Instead of applying colors separately, we can just select a palette so that the colors set in the selected palette will be applied automatically as in Excel.

Using the code

I am using jquery-1.9.1.js for the implementation in my application, you can get this file from the attached application.

Once you include the jQuery file, please create an HTML5 page as shown below.
[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

</body>
</html>
[/html]

Include the jQuery reference as in the following
[js]
<script src="jquery-1.9.1.js"></script>
[/js]

Now to replace our body tag as shown below
[html]
<body>
<header style="text-align:center"> Custom Color Palette – sibeeshpassion</header>

<br />
<br />
<br />
<br />
<br />
<br />
Change Series Color:
<label id="changecolor" title="Change Color"><u><i>Change Color</i></u></label>
<ul class="containerul">
<li>
<p class="boxcontainer">
Color Palette I :
<br />
<span class="simplebox" title="#F29F98" style="background-color: #F29F98"></span>
<span class="simplebox" title="#F27C72" style="background-color: #F27C72"></span>
<span class="simplebox" title="#F15C4E" style="background-color: #F15C4E"></span>
<span class="simplebox boxspecialone" title="#F03B2A" style="background-color: #F03B2A"></span>
<span class="simplebox" title="#F12815" style="background-color: #F12815"></span>
<span class="simplebox" title="#FF1601" style="background-color: #FF1601"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette II :
<br />
<span class="simplebox" title="#A3F0BE" style="background-color: #A3F0BE"></span>
<span class="simplebox" title="#7FEBA5" style="background-color: #7FEBA5"></span>
<span class="simplebox" title="#48EB81" style="background-color: #48EB81"></span>
<span class="simplebox boxspecialone" title="#25EB6B" style="background-color: #25EB6B"></span>
<span class="simplebox" title="#14E85E" style="background-color: #14E85E"></span>
<span class="simplebox" title="#03E552" style="background-color: #03E552"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette III :
<br />
<span class="simplebox" title="#F48A8A" style="background-color: #F48A8A"></span>
<span class="simplebox" title="#F57777" style="background-color: #F57777"></span>
<span class="simplebox" title="#FA2A2A" style="background-color: #FA2A2A"></span>
<span class="simplebox boxspecialone" title="#FC0909" style="background-color: #FC0909"></span>
<span class="simplebox" title="#EF0505" style="background-color: #EF0505"></span>
<span class="simplebox" title="#FF0000" style="background-color: #FF0000"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette IV :
<br />
<span class="simplebox" title="#C3A1E9" style="background-color: #C3A1E9"></span>
<span class="simplebox" title="#AF7AEC" style="background-color: #AF7AEC"></span>
<span class="simplebox" title="#A25CF2" style="background-color: #A25CF2"></span>
<span class="simplebox boxspecialone" title="#8D32F5" style="background-color: #8D32F5"></span>
<span class="simplebox" title="#811CF5" style="background-color: #811CF5"></span>
<span class="simplebox" title="#790AF9" style="background-color: #790AF9"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Here colors will be changed whenever you select the palette 🙂
<div id="checker" class="outputcontainer">
</div>
</body>
[/html]

Here what I am doing is, I am creating a ul element and inside that I am creating some p elements with span. Please see that in the preceding HTML element section.

Once you are done with the elements, what would be the next step? Yeah, we need to style them. Please include the following styles.
[css]
<style>
.simplebox {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 20px;
height: 20px;
}

.simpleboxdynamic {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 99.3%;
height: 27px;
padding: 5px;
border-radius: 3px;
text-align: center;
}

.boxspecialone {
border: 1px solid #ff00ff;
}

.boxcontainer {
border: 1px solid #ccc;
width: 165px;
position: relative;
height: 50px;
padding: 2px;
}

.boxcheckbox {
float: right;
margin-top: 6px;
}

.outputcontainer {
border: 1px solid #ccc;
width: 100%;
position: relative;
height: 247px;
margin-top: 5px;
}

.maincontainer {
display: none;
}

.containerul {
position: absolute;
width: 190px;
list-style: none;
margin: 4px;
/*border: 2px solid #29b8e5;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ffffff;
overflow-y: auto;
overflow-x: hidden;
display: block;
margin-left: 0px;
z-index: 200;
height: 305px;
display: none;
left: 60px;
}

#changecolor {
cursor: pointer;
}
</style>
[/css]

Our next step is writing the scripts. Please see that below.
[js]
<script>
$(document).ready(function () {
$("#changecolor").click(function () {
$(".containerul").slideToggle(1000);
});
$(".boxcheckbox").click(function () {
$("#checker").html(”);
//checked true only for the current
$(".boxcheckbox").prop("checked", false);
$(this).prop("checked", true);
//bind colors start
var colorCount = 0;
var spans = $(this).parent().find(‘span’);
var test = ‘<div></div>’;
$.each(spans, function (key, value) {
var color = $(value).attr(‘title’);
var p = ‘<p style="background-color:’ + color + ‘" class="simpleboxdynamic"> Color Key :’ + key + ‘</p>’;
$("#checker").append(p);
});
});
});
</script>
[/js]

In the script, I am calling the checked event of the check boxes inside the p element and whenever a user selects one, I am finding the parent colors and applying that to the output UI.
That is all. Cool, we have done it.

Complete Code

[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Color Palette – sibeeshpassion</title>
<style>
.simplebox {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 20px;
height: 20px;
}

.simpleboxdynamic {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 99.3%;
height: 27px;
padding: 5px;
border-radius: 3px;
text-align: center;
}

.boxspecialone {
border: 1px solid #ff00ff;
}

.boxcontainer {
border: 1px solid #ccc;
width: 165px;
position: relative;
height: 50px;
padding: 2px;
}

.boxcheckbox {
float: right;
margin-top: 6px;
}

.outputcontainer {
border: 1px solid #ccc;
width: 100%;
position: relative;
height: 247px;
margin-top: 5px;
}

.maincontainer {
display: none;
}

.containerul {
position: absolute;
width: 190px;
list-style: none;
margin: 4px;
/*border: 2px solid #29b8e5;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ffffff;
overflow-y: auto;
overflow-x: hidden;
display: block;
margin-left: 0px;
z-index: 200;
height: 305px;
display: none;
left: 60px;
}

#changecolor {
cursor: pointer;
}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#changecolor").click(function () {
$(".containerul").slideToggle(1000);
});
$(".boxcheckbox").click(function () {
$("#checker").html(”);
//checked true only for the current
$(".boxcheckbox").prop("checked", false);
$(this).prop("checked", true);
//bind colors start
var colorCount = 0;
var spans = $(this).parent().find(‘span’);
var test = ‘<div></div>’;
$.each(spans, function (key, value) {
var color = $(value).attr(‘title’);
var p = ‘<p style="background-color:’ + color + ‘" class="simpleboxdynamic"> Color Key :’ + key + ‘</p>’;
$("#checker").append(p);
});
});
});
</script>
</head>
<body>
<header style="text-align:center"> Custom Color Palette – sibeeshpassion</header>

<br />
<br />
<br />
<br />
<br />
<br />
Change Series Color:
<label id="changecolor" title="Change Color"><u><i>Change Color</i></u></label>
<ul class="containerul">
<li>
<p class="boxcontainer">
Color Palette I :
<br />
<span class="simplebox" title="#F29F98" style="background-color: #F29F98"></span>
<span class="simplebox" title="#F27C72" style="background-color: #F27C72"></span>
<span class="simplebox" title="#F15C4E" style="background-color: #F15C4E"></span>
<span class="simplebox boxspecialone" title="#F03B2A" style="background-color: #F03B2A"></span>
<span class="simplebox" title="#F12815" style="background-color: #F12815"></span>
<span class="simplebox" title="#FF1601" style="background-color: #FF1601"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette II :
<br />
<span class="simplebox" title="#A3F0BE" style="background-color: #A3F0BE"></span>
<span class="simplebox" title="#7FEBA5" style="background-color: #7FEBA5"></span>
<span class="simplebox" title="#48EB81" style="background-color: #48EB81"></span>
<span class="simplebox boxspecialone" title="#25EB6B" style="background-color: #25EB6B"></span>
<span class="simplebox" title="#14E85E" style="background-color: #14E85E"></span>
<span class="simplebox" title="#03E552" style="background-color: #03E552"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette III :
<br />
<span class="simplebox" title="#F48A8A" style="background-color: #F48A8A"></span>
<span class="simplebox" title="#F57777" style="background-color: #F57777"></span>
<span class="simplebox" title="#FA2A2A" style="background-color: #FA2A2A"></span>
<span class="simplebox boxspecialone" title="#FC0909" style="background-color: #FC0909"></span>
<span class="simplebox" title="#EF0505" style="background-color: #EF0505"></span>
<span class="simplebox" title="#FF0000" style="background-color: #FF0000"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
<li>
<p class="boxcontainer">
Color Palette IV :
<br />
<span class="simplebox" title="#C3A1E9" style="background-color: #C3A1E9"></span>
<span class="simplebox" title="#AF7AEC" style="background-color: #AF7AEC"></span>
<span class="simplebox" title="#A25CF2" style="background-color: #A25CF2"></span>
<span class="simplebox boxspecialone" title="#8D32F5" style="background-color: #8D32F5"></span>
<span class="simplebox" title="#811CF5" style="background-color: #811CF5"></span>
<span class="simplebox" title="#790AF9" style="background-color: #790AF9"></span>
<input type="checkbox" class="boxcheckbox" />
</p>
</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Here colors will be changed whenever you select the palette 🙂
<div id="checker" class="outputcontainer">
</div>
</body>
</html>
[/html]

Output

Create Custom Colour Palette

Conclusion

I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards
Sibeesh Venu