HTML5 - Web Storage
Introduction:
One of the best features of HTML5 is Web Storage. Web applications can store data locally on the client side of the browser with the help of the Web Storage feature. On the browser, it stores data as a key/value pair. DOM storage is another name for web storage.
Although web storage and cookies are similar in how they store data, web storage is faster and more efficient.
Web Storage has the following advantages over cookies:
- Web Storage can use up to 5MB of storage for each domain. If the space limit has been exceeded, the browser software could notify the user.
- It is faster than storing cookies because it won't transfer data to the server side.
- Cookies' data expires after a certain amount of time or session. However, the data stored locally never expires.
- Cookies are less secure than web storage.
Web Storage Types
There are two web storage types, each with a different lifetime and scope.
Session Storage: Session Storage use Windows.sessionStorage Object that is only kept for the session and lost upon closing the window or browser tab.
Local Storage: Local storages use Windows.localStaorage Object, which is available on all pages. However, data remains unchanged after the browser is stopped and reopened (data is stored without expiration).
- The sessionStorage Object:
The only difference between the sessionStorage and localStorage objects is that SessionStorage only stores data for a single session. Data will be lost or erased if you close the browser.
<!DOCTYPE html> <html> <head> <style> div{ background-color: pink; height: 50px; } </style> </head> <body> <h2>Example of counter Using Session Storage</h2> <button onclick="counter();">click me</button> <div id="output">See the result here:</div> <script type="text/javascript"> function counter() { if(sessionStorage.hits){ sessionStorage.hits=Number(sessionStorage.hits)+1; } else{ sessionStorage.hits=1; } document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ sessionStorage.hits +" "+"times"; } </script> <p>Click the counter button to see the total counts. </p> <p>Now, if you close the browser then it will reset to initial value. </p> </body> </html>
Output:
If you click on the "click me" button in the output, it displays that you have clicked the counter button 1 time, as shown below:
If you click on counter button 2 times output will be:
Similarly if you click on counter button 3 three times, the output will be:
If you click on counter button multiple times like shown above, the value will be displayed in the output.
Explanation:
The only difference between the previous example and the local storage counter example is that sessionStorage.hits was used for session storage.
If you close the browser, the counter here will reset to its starting value.
Tips: You can use JavaScript and jQuery to improve the usability of these examples.
- The localStorage Object:
Storage that covers many windows and extends beyond the current session is designed for use with local storage. Specifically, Web applications may want to store megabytes of user data on the client side for efficiency reasons, such as entire user-authored documents or a user's mailbox.
Again, the cookies don't handle this situation well because each request passes them across.
Example:
The localStorage property, shown in Example HTML5, can be used to access a page's local storage without a time limit. This local storage is accessible whenever you use the page.
The code that would set a local storage variable and access it each time and this page is accessed including the next time you open the window is as follows.
Example:
<!DOCTYPE html> <html> <head> <style> div{ background-color: pink; height: 50px; } </style> </head> <body> <h2>Example of counter Using Session Storage</h2> <button onclick="counter();">click me</button> <div id="output">See the result here:</div> <script type="text/javascript"> function counter() { if(sessionStorage.hits){ sessionStorage.hits=Number(sessionStorage.hits)+1; } else{ sessionStorage.hits=1; } document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ sessionStorage.hits +" "+"times"; } </script> <p>Click the counter button to see the total counts. </p> <p>Now, if you close the browser then it will reset to initial value. </p> </body> </html>
Output:
- Remove Web Storage:
As we've seen, when you close the browser, the data saved in the session storage is automatically removed, but the data saved in local storage remains in the browser.
Therefore, you must use two methods if you want to erase the data from local storage:
localStorage.removeItem('key'): You can use the "key" to remove the value associated with a specific key if you want.
localStorage.clear(): Call the localStorage.clear() function to remove or clear all setting that has a key/value pair.
Example:
<!DOCTYPE html> <html> <head> <title>Web Storage API</title> <style> body{ color: green; text-align: center; font-size: 30px; margin-top: 30px; font-style: italic; } </style> </head> <body> <button onclick="remove();">Remove item</button> <div id="output"></div> <script> if(typeof(Storage)!=="undefined") { localStorage.setItem("name","Bhavya"); localStorage.setItem("Country", "India"); document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country; } else{ alert("Sorry! your browser is not supporting the browser") } function remove() { localStorage.removeItem("name"); document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country; } </script> </body> </html>
Output:
If you click on the "Remove item" button, the output will be:
Explanation:
The value for the key "name" will be deleted because we used localStorage.removeItem("name"); in the example above.
Using the localStorage.clear() method, you can either erase the id associated with a specific key or all data.
Conclusion
The term "DOM Storage" is sometimes used equally with "Web Storage." The reason for the latter is that the data is actually kept in the window object of JavaScript (i.e., window.localStorage and window.sessionStorage).
Finally, but just as importantly, remember that users have the ability to disable Web Storage just like they do cookies. Therefore, you must always have a backup plan in place in an emergency.window or sessionStorage.There is no local storage available. Although there may be some issues, like the StorageEvent, most popular web browsers today support HTML5 Web Storage, which is a more convenient, flexible, secure, and faster way to store HTTP state data than HTTP Cookies. Additionally, they follow with the W3C standard and can store data in sessionStorage and localStorage.