HTML5 - Web Storage
What is HTML5 Web Storage
HTML5 introduces two new structures, that are like HTTP session cookies, mainly for storing structured data directly on the client-side in other to overcome the following disadvantages.
1. Regular cookies are added with every HTTP request, thereby slowing down your web application by transmitting the same data.
2. Regular cookies are added with every HTTP request, thereby sending data unencrypted over the internet.
3. Regular cookies are restricted to about 4 KB of data. This is not enough storage space to store the required data.
The two new web storages are called session storage and local storage, they would be required to handle different storage situations.
The newest versions of basically every browser have support for HTML5 Storage including Internet Explorer.
Session Storage
The Session Storage was built for situations in which the visitor is undergoing a single transaction but could also be doing multiple transactions in a different window all at the same time.
Example
HTML5 launched the sessionStorage attribute for javascript that would be used by websites to add required data to the session storage, and any page from the same site will be able to access it as long as it is opened in that particular browser window, that's why it is called the session storage. Immediately you close the particular browser window, the session would end and would be lost.
The code below will set a session variable and access that variable:
<!DOCTYPE HTML> <html> <body> <script type = "text/javascript"> if( sessionStorage.hits ) { sessionStorage.hits = Number(sessionStorage.hits) +1; } else { sessionStorage.hits = 1; } document.write("Total Hits :" + sessionStorage.hits ); </script> <p>Refreshing the page will increase number of hits,</p> <p>Then close the window and open it again and check the current result.</p> </body> </html>
Local Storage
The Local Storage is built for storing data across multiple windows and that also lasts more than the current session. Basically, web apps might want to store user data, like an entire user-written document or a user's mailbox, directly on the client-side because of performance reasons
Cookies can not handle this particular scenario well due to the fact that they are only transmitted with every request
Example
HTML5 launched the localStorage attribute that can be used to have access to a web page local storage section without any time limit and this local storage is available whenever you open that particular web page
The code below is the code that would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:
<!DOCTYPE HTML> <html> <body> <script type = "text/javascript"> if( localStorage.hits ) { localStorage.hits = Number(localStorage.hits) +1; } else { localStorage.hits = 1; } document.write("Total Hits :" + localStorage.hits ); </script> <p>Refreshing the page will increase number of hits.</p> <p>Then close the window and open it again and check the current result.</p>
</body> </html>
Delete Web Storage
Storage of sensitive user data on a local system is dangerous and it can leave a security breach point.
The Session Storage data will be deleted by the web browser after the current session gets terminated.
To delete a local storage data you will have to call the localStorage.remove('key') method; in which the 'key' is the key for the value you want to delete. If you need to clear all settings and dada, you will have to call the localStorage.clear() method.
Example
<!DOCTYPE HTML> <html> <body> <script type = "text/javascript"> localStorage.clear(); // Reset number of hits. if( localStorage.hits ) { localStorage.hits = Number(localStorage.hits) +1; } else { localStorage.hits = 1; } document.write("Total Hits :" + localStorage.hits ); </script> <p>Refreshing the page will not to increase the value of the hit counter.</p> <p>Then close the window and open it again and check the result.</p> </body> </html>
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
