Introduction About Web Storage And why we Use.
Posted By :Kajal Singh |27th February 2019
Web Storage (Local Storage And Session Storage)
Web storage is also known as DOM(Document Object Model) storage provides web application software methods and protocols used for storing data in a web browser. It provides a better programmatic interface than the cookies because it provides an associative array data model where the keys and values are both strings. It stored data same as cookies but with a great capacity and no information stored in the HTTP request header.
what is the Purpose to use web storage:
Web storage is basically used for storing information client-side (and never transmitted to the server), while cookies are used for communication with the server and automatically added to headers of all requests.
There are two main web storage types are as follow:
local storage and session storage they behaving similarly to persistent cookies and session cookies. This storage differs in scope and lifetime.
Local storage:- Data placed in local storage is per origin ex- the combination of protocol, hostname, and port number as defined in the same-origin policy. It Provides Maximum Storage limit amongst s(session and cookies).
Session storage:- is per-origin-per-window-or-tab and is limited to the lifetime of the window. Session storage allows for separate instances of the same web application to run in different windows without interfering with each other, this case is not supported by the cookies. It provides storage limit is larger than a cookie (at least 5MB).
Usage:
Browsers support web storage that has the global variables, sessionStorage and localStorage declared at the window level.
Syntax:-
sessionStorage
// It Stores the value on browser for duration of the session
sessionStorage.setItem('key', 'value');
//It Retrieving the value. It gets deleted when the browser is closed and re-opened
alert(sessionStorage.getItem('key'));
Syntax:-
localStorage
//It Stores the value on the browser beyond the duration of the session
localStorage.setItem('key', 'value');
//It Retrieving the value. It persists even after closing and re-opening the browser.
alert(localStorage.getItem('key'));
Data types:
Only strings can be stored through the Storage API. Storing a different data type gives the result in an automatic conversion into a string. Conversion into JSON(JavaScript Object Notation) allows for effective storage of JavaScript objects.
Syntax:-
// It stores an object instead of a string
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string
// It stores an integer instead of a string
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string
// It stores an object using JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value
Thanks & Regards,
Ready to innovate ? Let's get in touch
