Introduction
The concept of local and session storage in a web application was introduced in HTML 5. Before HTML 5, the local data in the client-side was stored in the cookies. Unlike cookies, now the web application can store the data locally within the browser which can’t be transferred to the server.
There are two types of web storage.
- Local Storage
- Session Storage
Local Storage
Local storage stores the data, the data persists until the user manually clears the browser cache or programmatically clears the storage.
Adding Entries
We can add the data in local storage by providing the key and value pair, the localStaorage window object with setItem function is used to add entries to the local storage. The memory limit is based on browser 5-10MB for most of the browser.
localStorage.setItem(‘key’,’value’)
- localStorage.setItem('name','value1')
You can check the data stored in localStorage using the browser developer tool. In Chrome, it will be under the Application tab.
Reading an Entry
We can use getItem function to get the value in the local storage using the key.
localStorage.getItem(‘key’)
- localStorage.getItem('name')//return value1
Updating the Entry
Using the setItem function, you can update the data in localstorage using the same key.
- localStorage.setItem('name','value2')
Delete the Entry
The removeItem method is used to remove the entry from the local storage.
localStorage.removeItem(key)
- localStorage.removeItem('name')
Remove all the Entry in local storage
The clear method is used to clear all the entry in the local storage.
- localStorage.clear()
Join the conversation! Your thoughts help the community grow.