Hello friends,
Here we are taking a short discussion on Web Storage, when we talked about Web Storage we come to know with two ways to store data either by SERVER SIDE or CLIENT SIDE.
On Server Side it is very easy to store data which you can retrieve at any time you want as it provides you so many ways to do it.But on Client Side it always has been a great obstacle for the user to store data which one can use it for the future preference.
Now days as we are seeing that HTML5, JQuery and JavaScript are mostly used languages for making client side applications and day by day they are getting more advanced with more appropriate methods and plug-in.But today even we are lacking to store data on the client side, and for the same (W3C) has made some things which help us to do such things like Session Storage and Local Storage which is much more powerful than traditionalCookies.
Let’s first have a little info about Cookies that what it’s really beneficial for us or harmful. The Actual scenario tells us that Http protocol, which arranges for the transfer of web pages to your browser and browser requests for pages to servers, is state-less, which means that once the server has sent a page to a browser requesting it, it doesn’t remember a thing about it. So if you come to the same web page a second, third, hundredth or millionth time, the server once again considers it the very first time you ever came there. so somehow cookie is responsible for the solution for this.
A Cookie is a small text file in which a website can store different information. Cookies are saved on the user’s hard drive and not on the server.
Most cookies expire (delete themselves) after a predetermined time period, which can range from one minute to several years. But the user can also identify and delete any cookies on his/her computer.As soon as you request a page from a server to which a cookie should be sent, the cookie is added to the HTTP header.
So every time you visit the site the cookie comes from, information about you is available. This is very nice sometimes, at other times it may somewhat endanger your privacy.
Before we go on further, let’s take a very brief look on why the current way of storing data on the client-side — Cookies — is a problem:
Low size: Cookies generally have a maximum size of around 4KB, which is not much good for storing any kind of complex data.
It’s difficult for cookies to keep track of two or more transactions on the same site, which might be happening in two or more different tabs.
Cookies can be exploited using techniques such as cross site scripting, resulting in security breaches.
Other (less popular) alternatives to cookies include techniques involving query strings, hidden form fields etc.
Each with their own set of problems related to security, ease of use, size restrictions etc. So up until now we have been using pretty bad ways of storing data on the user’s end. We need a better way, which is where Web Storage comes in.
Now we come on the way of HTML5 that provide us a new way of Web Storage.
Session Storage VS Local Storage
Both Session and Local Storage will typically be able to store around 5Mb of data per domain, which is significantly more than cookies.
Session Storage: Session Storage has one purpose: To remember all the data in your session, and forget it as soon you close the tab (or window) you are working in.
To set a key value pair in Session Storage, you just need to write a line like this:
sessionStorage.setItem(yourkey, yourvalue);
To retrieve the data again, you would write:
var item = sessionStorage.getItem(yourkey);
e.g.;
To store the value this is a sample sentence in the Session Storage, you could write:
sessionStorage.setItem(1, ‘This is a sample sentence’);
And to retrieve that sentence back inside a JavaScript alert, you’d write:
var item = sessionStorage.getItem(1); alert(item);
Another example of setItem() could be: sessionStorage.setItem(‘name’, ‘john’);
and you could retrieve it using : var name = sessionStorage.getItem(‘name’);
There are also methods for Removing and Clearing data from the Session Storage.
The removeItem() method is used to remove a particular item from the list:
var item = sessionStorage.removeItem(yourkey);
Bear in mind that you can also just reference a data item’s key and remove it from the list that way:
var items = sessionStorage.removeItem(1);
The clear() method is used to clear all items in the list; you use it in the following way:
sessionStorage.clear();
And you can use the length attribute to find out of the number of key/value pairs in the storage, like this: var no_of_items = sessionStorage.length;
Local Storage : Local Storage is used if you want the data to be stored for more than a single session.
When a page uses Local Storage, the page (or window) can be closed and re-opened, and still show the saved data — it provides persistent storage.
Saving and Retrieving data in Local Storage works similarly to Session Storage: it uses the same function names setItem() and getItem(). To save a sentence in Local Storage you write something like this:
Also just like Session Storage, Local Storage supports the length attribute, removeItem() and clear().