Full stack Web Development

Web Storage Overviews in HTML5

Let’s explore the Web Storage interface in JavaScript. Allowing the front-end of your applications to remember persistent data across the entire domain, for each individual user. It is somewhat similar to creating sessions and cookie variables in other programming languages that you might have worked with.

What is Web Storage?

Web Storage is when we post a request while signing up on a form, or when we are sending a request to a server. If we traditionally see it, a web page has to send a request to the server to receive new data, i.e., the page requests data from the server. With server-sent events, it’s possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.
Basically, you’re given a request from the client-side and the response will be served from the server-side.
It takes updates from the server and gives out the results on web browsers. Before taking updates from the server, the browser needs to ask if any updates were available on the web servers. But if we are dealing on the front-end side without getting involved with persisting data from the database, then we can store our data in the Local Storage and Session Storage as well.

What is Local Storage and Session Storage?

Local storage is more secure and large amounts of data can be stored locally without affecting the website’s performance and our data can be stored for a longer period.
sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when a page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

Example:

Let’s create two HTML files.

  1. html
    <script>
    	localStorage.setItem("username","Som");
    	sessionStorage.setItem("username","Bhai");
    </script>
    <a href="Otherpage.html">Go to other page</a>
    

    In the Somepage.html file, we have got a script tag, and in that script tag, we used sessionStorage and localStorage setItem methods. Yes, both the methods, of sessionStorage and localStorage are the same.
    setItem: setItem is a method in localStorage and sessionStorage which helps us set an item and store it in the web browser’s web storage area.


You can find localStorage and sessionStorage by inspecting on Google Chrome and by going to dev tools Application.

  1. Otherpage.html
<body>
	<script>
      document.write("<h1> Hi "+localStorage.username+  "</h1>");
      document.write("<h1> Hi "+sessionStorage.username+ "</h1>");
	</script>
</body>

Now let’s talk about Otherpage.html, here we are only printing data that was set on the Somepage.html.
Let’s run our code:
We have to run to Somepage.html in the web browser.

After running Somepage.html, we get the landing page as shown in the picture above. “Go to other page,” means we have successfully linked to Otherpage.html.
Next, we click on the “Go to other page” hyperlink.

Here you see the data which we have set in localStorage and SessionStorage.
Hi Som ->This data we will go into localStorage.
Hi Bhai ->This data we will get in sessionStorage.
Let’s see view the data in localStorage and sessionStorage:

We got Som in the localStorage file.

What is the difference between localStorage and sessionStorage?

sessionStorage & localStorage are used to store data on the client-side. Each one has its own storage and expiration limit.
sessionStorage: Is similar to localStorage, but expires when the browser is closed (not the tab). The main difference is that localStorage persists over different tabs or windows (even if we close the browser) accordingly with the domain security policy and the user choices about quota limit.
Let’s have the same example
We can copy the same link of the URL from the address bar while we hyperlink our page to Otherpage.html file, where our results were displayed.
Next, we need to copy the same link and paste it in the other tab and we will get the result as displayed below.

“Hi Som,” which is a localStorage data, it persisted even though we were on an another tab, where the session data got lost.
Some useful methods for localStorage and sessionStorage
There are certain methods which help us define some tasks for the localStorage, which is as follows:

We can do some experimenting using the method as shown below:
How to clear the data?
Ans
: localStorage.clear();

<script>
 localStorage.setItem("username","Som");
 localStorage.setItem("country","India");
 localStorage.setItem("color","blue");
</script>

Here we have used setItem and using this we can do some experiments to print the answer.

document.write("<h1> Hi "+localStorage.username+ "from " +localStorage.country+ </h1>" );

How to find the length of the localStorage?
Ans
: We can write document.write(localStorage.length);
What is the use of key method?
Ans
: Running the key method will return the key of the name of that item.
document.write(localStorage.key(0));
document.write(localStorage.getItem(“username”));//returns the actual value for whatever key name that you return.
document.write(localStorage.getItem(localStorage.key(0));//returns the actual value for whatever key name you return. According to our example, it will display the color key and give out the value “blue.”
How to remove one item?
Ans: localStorage.removeItem(“country”);
Conclusion
Storing information locally on a user’s computer is a powerful strategy for a developer who is creating something for the Web. The main problem with HTTP as the main transport layer of the Web is that it is stateless. This means that when you use an application and close it, its states will reset the next time you open it. If you close an application on your desktop and re-open it, its most recent state is restored. Hence, as a developer, you need to store the state of your interface somewhere.
Normally, this is done on server-side, and you would check the username to know which state to revert but what if you don’t want to force people to sign up? This is where local storage comes in.
You would keep a key on the user’s computer and read it out when the user returns.
Enroll for the Front-end Web Development Training Course conducted by Acadgild and become a successful Web developer.

Som

is a full-stack web developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 4 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn full-Stack web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close