Click here to Skip to main content
14,601,122 members

Working With Client Side Local Storage

Rate this:
4.85 (9 votes)
Please Sign up or sign in to vote.
4.85 (9 votes)
3 Aug 2015CPOL
How to use local storage in HTML5

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 days pass, 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. At a point of time, we may encounter some performance issues.

So in the modern web, we have a new solution, Local Storage.

Background

Currently, I am working in 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 in 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.

localStorage.setItem("item", "http://sibeeshpassion.com/")

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

if (localStorage) {
}
else {
$("#showitem").text("your browser does not support this feature");
}

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:

var itm = localStorage.getItem("item");

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 from local storage, please see the following syntax:

localStorage.removeItem("item");

Removing All the Data from localStorage

To remove the data from the localStorage, please see the following syntax:

localStorage.clear();

Demo

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

<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>

Now we will add the jQuery reference:

<script src="jquery-1.11.1.min.js"></script>

Set the Item

$("#setitem").click(function () {
localStorage.setItem("item", "http://sibeeshpassion.com/")
});

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

set_items_to_local_storage

Figure: After setting the item

set_items_to_local_storage1

Get the Item

$("#getitem").click(function () {
                    var itm = localStorage.getItem("item")
                    $("#showitem").text(itm);
                });

Remove the Item

$("#removeitem").click(function () {
                    localStorage.removeItem("item");
                    $("#showitem").text(");
                });

Complete Code

<!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>

Conclusion

That’s all! We now have made our application fast and reliable. Download the source for the demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sibeesh Passion
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA16-Sep-15 1:04
professionalȘtefan-Mihai MOGA16-Sep-15 1:04 
GeneralRe: My vote of 5 Pin
Sibeesh Passion16-Sep-15 1:45
professionalSibeesh Passion16-Sep-15 1:45 
GeneralMy vote of 5 Pin
Mahsa Hassankashi12-Sep-15 9:51
mvaMahsa Hassankashi12-Sep-15 9:51 
Great
GeneralRe: My vote of 5 Pin
Sibeesh Passion13-Sep-15 19:07
professionalSibeesh Passion13-Sep-15 19:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 3 Aug 2015

Tagged as

Stats

15.7K views
3 bookmarked