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

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