HTML Web Storage
web storage and web applications can store data locally within the user’s browser.
Before HTML5, application data had to be stored in cookies, included in each server request. Web storage is most secure, and large amounts of data can be stored locally, without any affecting website performance.
The storage limit is far larger (at least 5MB) and information is never transferred to the server side.
There are two types of web storage
Local storage:
The local storage uses the Windows.localStaorage object to store data for your entire website on a permanent basis. That means the stored local data will be available on the next day, next week, or the next year unless you remove it.
Session storage:
The session storage provides the sessionStorage object to store data on a temporary basis, for a single browser window or tab. The data disappears when the session ends i.e. when the user closes that browser window or browser tab.
The localStorage Object:
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Storing Data with HTML5 Local Storage</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> // Check if the localStorage object exists if(localStorage) { $(document).ready(function() { $(".save").click(function() { // Get input name var firstName = $("#firstName").val(); // Store data localStorage.setItem("first_name", firstName); alert("Your first name is saved."); }); $(".access").click(function() { // Retrieve data alert("Hi, " + localStorage.getItem("first_name")); }); }); } else{ alert("Sorry, your browser do not support local storage."); } </script> </head> <body> <form> <label>First Name: <input type="text" id="firstName"></label> <button type="button" class="save">Save Name</button> <button type="button" class="access">Get Name</button> </form> </body> </html>
OUTPUT:
Example explained:
- setItem(key, value) stores the value associated with a key.
- getItem(key) retrieves the value associated with the key.
The sessionStorage Object:
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Storing Data with HTML5 Session Storage</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> // Check if the localStorage object exists if(localStorage) { $(document).ready(function() { $(".save").click(function() { // Get input name var lastName = $("#lastName").val(); // Store data sessionStorage.setItem("last_name", lastName); alert("Your last name is saved."); }); $(".access").click(function() { // Retrieve data alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name")); }); }); } else{ alert("Sorry, your browser do not support local storage."); } </script> </head> <body> <form> <label>Last Name: <input type="text" id="lastName"></label> <button type="button" class="save">Save Name</button> <button type="button" class="access">Get Name</button> </form> </body> </html>
OUTPUT:
Tip: The HTML5’s web storage feature is supported in all major modern web browsers like Firefox, Chrome, Opera, Safari, and Internet Explorer 8 and above.