Skip to main content

STORAGE API - Web development Tutorials

The HTML5 brought a lots of amazing technologies in the web . It also brought API called Storage API. This api is used to set and retrieve data stored on user's device. This is better than cookies.


1. Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes (4095, actually) - its per cookie. Local Storage is as big as 5MB per domain.
2. localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.
As you may have thought this property can be accessed using window object. This api has two properties namely sessionStorageand localStorage.(Remember we use camelcase in the name).
As you may have assumed the localStorage property stores data on user's device until it is deleted by the user (clearing cache) or by the script itself , whereas sessionStorage is deleted as soon as user leaves the site
A point to remember here is that this api may not work in incognito | private tabs.
JS
if(typeof(Storage)!=="undefined"){
//our code
}
else{
alert("Sorry Your browser is old");
}
We wrote above code to check whether the user's browser supports Storage API or not.
Let us check Whether this browser supports or not.
Now supposing the browser supports Storage api.

LocalStorage

JS
localStorage.setItem("lastname","Sharma");
//or you can use
localStorage.lastname = "Sharma";
You can use window.localStorage method also
JS
window.localStorage.setItem("firstname","Saurabh");
//or you can use
window.localStorage.firstname = "Saurabh";

Retrieving Item

The item can be retrieved by various methods
JS
localStorage.getItem("lastname");
//or assign it to a variable
var firstname = localStorage.firstname;
Or by using window object
JS
window.localStorage.getItem("lastname");
//or assign it to a variable
var firstname = window.localStorage.firstname;

Starting sessionStorage

It is too similar to localStorage , just replace localStorage with sessionStorage.
JS
sessionStorage.setItem("firstname","Saurabh");
// or 
sessionStorage.firstname = "Saurabh";
//or use window object
window.sessionStorage.setItem("lastname","Sharma");
//or 
window.sessionStorage.lastname = "Sharma";

Retrieving Item

JS
sessionStorage.getItem("firstname");
//or
var lastname = sessionStorage.lastname;

Comments

Post a Comment

Popular posts from this blog

CSS animations , flying rocket and rotating cube.

Learning CSS ANIMATIONS CSS animations are great and always been attractive for everyone. Today here I am gonna teach you the animation in which a font-awesome rocket is flying between the clouds and also a 3D rotating cube with perspective. The rocket animation is 2D and made with the help of font-awesome and css transform property. You can download the source file of flying rocket by Here  . For the full tutorial Go to  Rocket animation css tutorial  . Download the source file of rotating cube by  Here  . For full tutorial go to  to this link  .
Post a Comment
Read more

AJAX - Asynchronous JavaScript and XML

AJAX tutorial AJAX is a developer's dream, because you can:  Update a web page without reloading the page Request data from a server - after the page has loaded Receive data from a server - after the page has loaded Send data to a server - in the background What is AJAX? AJAX = Asynchronous JavaScript And XML.  AJAX is not a programming language.  AJAX just uses a combination of:   A browser built-in XMLHttpRequest object (to request data from a web server) JavaScript and HTML DOM (to display or use the data)  AJAX applications might use XML, plain text or JSON text to transport data. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. How ajax works 1. An event occurs in a web page (the page is loaded, a button is clicked) 2. An XMLHttpRequest object is created by JavaScript 3. The XMLHttpR...
1 comment
Read more

Html forms, all elements and all attributes

In HTML a form can be made using  form  tag. It is a container tag. Inside the form tag there are many input tags like email, text, password, phone, select, textarea etc. Form example HTML < body > < form > ••• </ form > </ body > We use  action  attribute to point to a webpage that will load when the user clicks submit button. HTML < form action = "query.php" > ••• </ form > When use GET the form data will be visible in page address. HTML < form action = "url" method = "get" > </ form > Use POST if the form is updating data or includes like password. HTML < form action = "url" method = "POST" > </ form > Remember: Default value of method attribute is get , hence the form value will be visible in address bar. Input tag The input element creates an input box in the form. There are many types of input boxes. HTML < form ...
Post a Comment
Read more