Client Side Storage - Web Storage

Web storage API allows to store data on user’s browser.

 

Web storage is more secure as it dose not send data to a server and has larger storage limit than cookie.

 

HTML has two web storage objects:

• localStorage: No expiry date for the data stored
• sessionStorage: Data lost when session (browser) closed

How to Use?

We can use ‘setItem(‘key’, ‘value’) to store data, getItem(‘key’) for get stored data, and removeItem(‘key’) to delete one for both localStorage and sessionStorage.

1. localStorage

▶ To save

localStorage.setItem('name', 'tom')

▶ To get the data

localStorage.getItem('name')

▶ To delete a specific data

localStorage.removeItem('name')

▶ To delete all the data

localStorage.clear();

2. sessionStorage

▶ To save

sessionStorage.setItem('nameSession', 'tom')

▶ To get the data

sessionStorage.getItem('nameSession')

▶ To delete a specific data

sessionStorage.removeItem('nameSession')

▶ To delete all the data

sessionStorage.clear()

How to Verify

Open the developer tool on your browser. Click ‘>>’ icon and ‘Application’

 

On the menu on the left choose either ‘Local Storage’ or ‘Session Storage’ then search the data by its key.

You can also delete data from here by clicking the circle with line crossed diagonally to delete all data or ‘x’ icon to delete one that is selected.

 

We have seen web storage in this writing.

---

References

HTML Web Storage API