- 3 years ago
- Shahzad Gujjar
- 2,742 Views
-
2
This tutorial will show you how to use the HTML5 web storage feature to store data on the user’s browser.
What is Web Storage?
Similar to cookies, HTML5’s web storage feature allows you to store certain information locally on the user’s computer, but it is much faster and better. Web storage, on the other hand, is no more secure than cookies. To learn more about cookies, please see the PHP cookies tutorial.
In contrast to cookies, which send data to the server for every request, the information stored in the web store is not sent to the webserver. Furthermore, where cookies allow you to store a small amount of data (roughly 4KB), web storage allows you to store up to 5MB of data.
The scope and lifetime of two types of web storage differ:
- Local storage — The local storage object is used to store data for your entire website on an permanent basis. That means that unless you delete the stored local data, it will be usable the next day, week, or year.
- Session storage —The sessionStorage object is used to store data for a single browser window or tab on a temporary basis. When a session ends, i.e. when the user closes the browser window or tab, the data is removed.
All major modern web browsers, including Firefox, Chrome, Opera, Safari, and Internet Explorer 8 and above, support HTML5’s web storage feature.
The local Storage Object
As previously mentioned, the data is stored in the localStorage object with no expiration date. A key/value pair is used to store each piece of data. The name of the information is identified by the key (such as ‘first name’), and the value is the value associated with that key (such as ‘Peter’). Here’s an illustration:
// Check if the localStorage object exists
if(localStorage) {
// Store data
localStorage.setItem("first_name", "Peter");
// Retrieve data
alert("Hi, " + localStorage.getItem("first_name"));
} else {
alert("Sorry, your browser do not support local storage.");
}
Example explained:
The following is the meaning of the JavaScript code above:
- localStorage.setItem(key, value)The value associated with a key is stored in the this.
- localStorage.getItem(key) The value associated with the key is retrieved.
You can also delete a specific item from the storage if it exists by calling the removeItem() method with the main name, such as localStorage.removeItem(“first name”).
If you want to clear all of the storage, use the clear() form, such as localStorage.clear (). Since the clear() method takes no arguments and simply removes all key/value pairs from localStorage at once, it should be used with caution.
The data stored in web storage (both localStorage and sessionStorage) will not be available through browsers; for example, data stored in Firefox will not be available in Google Chrome, Safari, Internet Explorer, or other browsers.
The sessionStorage Object
The sessionStorage object works similarly to localStorage, with the exception that it only stores data for one session, i.e. until the user closes the window or tab.
To see how it actually works, consider the following example:
// Check if the sessionStorage object exists
if(sessionStorage) {
// Store data
sessionStorage.setItem("last_name", "Parker");
// Retrieve data
alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
alert("Sorry, your browser do not support session storage.");
}
- 3 years ago
- Shahzad Gujjar
- 2,742 Views
-
2
