These objects can be considered as alternatives for cookies and have their advantages over cookies as well, saying that these objects can overtake cookies completely is not true. Cookies can be read by servers and other web applications whereas the data stored locally on your browser can not be read by any server this provides security benefits.
localStorage and sessionStorage | Syntax
Both of these objects have identical functions with identical syntaxes. The syntax for the localStorage object is defined as
Similarly, for sessionStorage object, the syntax is defined as
Functions provided by localStorage & sessionStorage
Both of these objects from the Web Storage API provide 5 functions and a const variable as:
- setItem(): To store a new entry in the local storage in the form of key-value pairs
- getItem(): To fetch an entry from the local storage by using its key
- clear(): To clear the local storage of the browser
- remove(): To remove a value from the local storage using a key
- key(): To return the name of the key using its index value
- length(): A variable that stores the number of entries in the local storage
localStorage and sessionStorage | Usage
To demonstrate the use of Web Storage API, open the browser of your choice (chrome in our case) and visit a site like www.google.com.
How to Create/Add data in localStorage using setItem() method
Create a new data entry in the local storage by typing in the following line of code in the console of the browser:
If the command executes without any error, this means that a new entry was successfully made in the browser’s storage.
To verify this, go to the “applications” tab in the developer’s tools and expand local storage. You should be able to see the value in the explorer:
How to Access/Get data from localStorage using getItem() method
To access any entry from the local storage, you can either use a dot-operator with the localStorage object and then enter the key or use the getItem() function. To access the “Name” we just stored, we can either use:
console.log(name)
The output is as:
Or we can use the command as shown:
The output is as
Permanent storage of the localStorage object | Verification
To verify that the localStorage object stores data permanently (until removed manually), close the browsers that had previously opened up the link where you stored some data (in our case it was google.com)
You have ended the golden handshake and terminated the current sessions with the website by closing the browsers, reopen the browser and head over to the same website and then go into developer tools > Applications > Local storage to verify if the data is still there or not:
All of the above steps can be done with the sessionStorage Object but remember it will delete all the data when the session expires. Let’s see the demonstration.
How to create/add data in sessionStorage using setItem() method
We are going to first create a new entry in the sessionStorage with the following line of code:
The console displays “undefined” meaning the command was successfully executed without any error:
We can verify the storage under the session storage tab:
Close the browsers, and reopen the same link and then go to developer’s tools > Applications > sessions storage, you will see the following results:
You can see that the entry was deleted, this proves that the sessionStorage object only stores data for in the local storage of the browser for only one session.
Conclusion
The localStorage and sessionStorage objects are used to store data in the browser’s local storage and they are part of the Web Storage API; Both of these objects provide 5 functions to the user that allows the users to create, update, get and delete an entry from the local storage. The difference between the localStorage and sessionStorage object is that the localStorage object permanently stores the data against a website while the sessionStroage object only stores the data for one session.
