- In HTML5, web storage is one of the great features. In Web storage, web applications can locally store data within the browser on the client side.
- It is sometimes known as DOM storage and stores data in the form of key/value pair on the browser.
- Web storage is better and faster than cookies storage, and storing data is similar to cookies.
- Similarly, Web Storage can use storage space of up to 5MB per domain.
- It is faster than cookies storage because It will not send data to the server side.
- At web storage cookies data expires after some time or session but data stored by local Storage never expires.
- There are two types of web storage, they are;
- Local Storage
- Session Storage
Local Storage
- In this the local Storage object stores data locally within the browser.
- The data stored by local Storage object does not have any expiration date.
- The stored data will not be deleted if the browser is reopened or closed.
- The key/values are always stored as String, and can be accessed with localStorage.setItem() and localStorage.getItem() methods.
Sample Code
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3EWeb%20Storage%20API%3C%2Ftitle%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20body%7B%0A%20%20%20%20%20%20color%3A%20blue%3B%0A%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20font-size%3A%2030px%3B%0A%20%20%20%20%20%20margin-top%3A%2030px%3B%0A%20%20%20%20%20%20font-style%3A%20italic%3B%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cscript%3E%0A%20if(typeof(Storage)!%3D%3D%22undefined%22)%20%7B%0A%20%20localStorage.setItem(%22name%22%2C%22Venkat%22)%3B%0A%20%20localStorage.setItem(%22Country%22%2C%20%22India%22)%3B%0A%20%20%20document.write(%22Hi%20this%20is%22%2B%22%20%22%2BlocalStorage.name%2B%22%20%22%2B%22from%22%20%2B%22%20%22%2B%20localStorage.Country)%3B%0A%7D%0A%20else%7B%0A%20%20alert(%22Sorry!%20your%20browser%20is%20not%20supporting%20the%20browser%22)%0A%20%7D%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]
Output
Session Storage
- The session storage is same as local storage, but session storage stores data only for one session.
- If you close the browser, then data will be deleted or lost.
Sample Code
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cscript%3E%0Afunction%20clickCounter()%20%7B%0A%20%20if%20(typeof(Storage)%20!%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20if%20(sessionStorage.clickcount)%20%7B%0A%20%20%20%20%20%20sessionStorage.clickcount%20%3D%20Number(sessionStorage.clickcount)%2B1%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20sessionStorage.clickcount%20%3D%201%3B%0A%20%20%20%20%7D%0A%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20%22You%20have%20clicked%20the%20button%20%22%20%2B%20sessionStorage.clickcount%20%2B%20%22%20time(s)%20in%20this%20session.%22%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20%22Sorry%2C%20your%20browser%20does%20not%20support%20web%20storage…%22%3B%0A%20%20%7D%0A%7D%0A%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Cp%3E%3Cbutton%20onclick%3D%22clickCounter()%22%20type%3D%22button%22%3EClick%20me!%3C%2Fbutton%3E%3C%2Fp%3E%0A%3Cdiv%20id%3D%22result%22%3E%3C%2Fdiv%3E%0A%3Cp%3EClick%20the%20button%20to%20see%20the%20counter%20increase.%3C%2Fp%3E%0A%3Cp%3EClose%20the%20browser%20tab%20(or%20window)%2C%20and%20try%20again%2C%20and%20the%20counter%20is%20reset.%3C%2Fp%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]
Output
