What is Web Storage API?

Hello friends,

You all are welcome in this HTML series. We have looked upon the API of drag and drop of HTML in our last segment. How we can make an image draggable and after that, we took a view. We have dragged our image and dropped that by the view which we have allowed.

We have gone through all the APIs of drag and drop in the last segment.

So, I hope that you have performed the practical yourself which was given there. So, that was on drag and drop API.

Our today's topic is on the storage that is on HTML Web Storage API.

So, somehow we got to know about storage from storage and how we can store the data. 

But we will look in detail at how we can do this by using web API.

So, let's get started with the introduction of web storage.

So what is web storage? so every time we load an application or web page there are usually many possibilities of collecting data from us there.

For example, if you are going through a website and a form is given there then there is a possibility when you fill out a form then you enter your name, address or Pincode related information. so when you go through different websites then the same data you have to fill in every time.

Let's say if I am applying to any registration form or going through the admission process then it might be possible for me to apply to different colleges then I have to enter my name in every college's form or my address, Pincode, phone number every time.

If I am applying 5 times then I have to enter it 5 times, If I am applying 15 times then I have to enter it 15 times.

In this case, we have to enter the data repeatedly, the data we are entering. Web storage is very useful in that case.

What is web storage?

If we have entered data on any webpage or website then next time we are going through the same webpage then we don't have to enter the data again. Using the storage our data got fetched and shown up on the website there.

so usually this can be done by cookies.

So, what are cookies?

Cookies are also a type of storage but we can store a maximum of 5 MB of data in that and can transfer it to the server.

So, what is a cookie? It's a kind of web storage that is provided in the web storage and we can store our data in the cookie.

Data can be stored under value pairs in the cookie.

Let's say if I am writing my name and entering my name then its value will be what my name is

Same in my phone number. My phone number and the value of it.

Usually, we say it is a value pair. Like name and value of name, Phone number, and the value of phone number, address and the value of the address, and Pincode and the value of Pincode.

So, here we can see the key-value pair as whatever the attribute is (Name, Address, Pincode, Phone Number) it has its value.

In the same way, the data is stored in cookies but it can be a maximum of 5 MB.

Now, the HTML data is more than cookies which is available to us means it gives us a higher limit. means when we use web storage instead of cookies then we can access it by HTML web API and that is web storage.

There are two types of HTML web storage which is available for us. The first one is window local storage and the second one is window session storage. Because we are accessing this storage through API that's why its name is window.localStorage and window.sessionStorage. This API is available to us in this way.

Now, as the name is given here, local storage. What is local storage?

Local storage means the data got stored in our system physically which we are entering.

It means our data is getting stored in our system somewhere locally with no expiration date as here is written in the slide "stores data with no expiration date"

This means there is no expiry date if the data is getting stored in our system. It is stored in our system for an unlimited time.

Our next is session storage.

Let's say I have a login to any website then my session gets started as I log in and as I log out my session gets closed. It means, my data gets stored by the time of starting and closing the session.

My data gets lost as my session is completed. This means I can't access my data. I have to enter it again if I am logging in again. This means my data stores session-wise. If I enter my data like name, phone number address then after logging in the data can be accessible until I log out.

So this is our session storage.

Mainly the difference between local and session storage is there is no expiration limit in local storage because it gets stored in our system physically and in session storage our data does not get physically stored in our system, It is stored in cookies type system but it keeps stored itself until our session ends.

So, these are the two types of HTML Web Storage API

Local storage and session storage.

Now we will understand both local and storage through example.

Firstly we will open our sublime tab. Under this let me set my HTML and then automatically my HTML format got generated.

Because my program is on local storage so is Example Local Storage.

and here will work underbody because we have seen that javascript is a must to access the API whatever it is.

We will do all our storage-related work with javascript.

Under the program, we will write our HTML portion in Body, and the rest portion which is of JAVA, we will write under script.

So, firstly we will make a division under the body so that we will show up all the data which we have stored.

Let's say I have to make such an example in which I have to store a name in my local storage and whenever I access that local storage then I will get my first name and last name as a result.

So, here I am not saving any data manually.

I am saving the data statically to local storage and then I will fetch that data and show it up in the output.

Because I have to show a name in the output. So for that, <p tag and we are working with javascript so I will take an id. Under id I will give the result and end the P tag. save this program under folder HTML.

Along with this, we will run our program. So, here our program is running and this is our sublime text.

So, here you have seen that we have got where we have to show the result.

Now we will write the script. What we will do is when we have written the condition and the function of the main task is over then what we have to do after this condition, we have to show the value of our click count under result id.

So, in the same way. document.getElementbyId and our Id result.innerHTML= Now we have to enter the value of click count.

So, we will write like this: “You Have clicked the button”

Now we have to write how many times we have to click the button.

You have clicked the button + Now under this, we will write session storage. click count which is our variable+ times put space before time and save.

If our session store exists or session storage is supported in the browser then in that case. then here we are getting clicked by our button that you have clicked that many times.

But if it is not supported then here where our if is closing we will write, sameline document.HTML= Your browser doesn't support web storage and save.

So, here we have completed a program and now let us save.

So, as I have clicked on the button then I have got that your browser doesn't support the webpage means either the session storage is not supported or I am getting it undefined.

If in case, it is not running then what we will do is.

The output is showing to us every time because the under if condition the line we have written is in mandatory execution means we have not defined else statement.

So, under else we will write this line.

So, this portion is overwritten every time when this executes.

So, now we will save this and run.

Now, You have clicked this button 1 time.

In my current session, this number will get updated as many times as I will click this button.

Let's say 2,3,4,5,6 and so on.

So, this number will get an update as many times I click.

As I have opened this tab my session has started internally and under this session, I am clicking the button so under that session in this variable, my value gets stored and shown up every time by fetching the same.

If I am reloading the tab then my counter started from there.

This means it is not going back to one by resetting, It started from 18 if it was 18 means it is starting from its last value.

This indicates that when we are using session storage, our tab remains started until we close the tab.

If I copy the same program and run this in another tab then after clicking my click is one time means this is my new session.

So, here I am clicking the buttons 7 times 8 times and here 22,23. This means my button will start from the last counter value.

This example or session storage is totally dependent on the tab or session.

If I start a new tab then I will get my counter by one by resetting.

But in the same tab if I reload and click it and until I close my tab the same counter means my last value will get updated and show up to me.

So, this is our session storage.

We have seen two practicals today.

local storage and session storage. In Local storage we define the value under the system for example if I run this program in another tab then I will get the same output. Because we have stored the data of this local storage program under the system locally.

And what happens in a session is that our new session gets started when we open a new tab. In that case, our counter initializes from one and then moves forward.

This is our session's program.

The data gets stored locally in local storage and in session storage, our data gets stored in cookies. That is in our browser's internal memory

As I close these tabs means my local storage programs are only running right now and the session storage program is not running.

So, If I run the session storage program then my counter will show me by one after getting an increment.

Here we can see that after clicking on the button it starts from one.

This means this is the difference in local and session storage.

We have looked at both local and session storage now our next topic will be Web Worker API.

We will look at the Web Worker API in the next segment.

I request you to perform and run the program of both local and session storage which we have learned today.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

We will look at Web Worker API in the next segment

Thank you!