In this article we are take care of what is cookies, sessionStorage and localStorage ? How we can perform create, read and delete operation on cookies, sessionStorage and localStorage ?
1. Cookies
Cookies is a text file stored on the local computer and it is use for tracking purpose. When client send request to server, server generate response/information client can save that response/information in cookies. It helps clients for future use. (Here client is browser.) Maximum size of cookies file is 4KB.
Create / Read / Edit / Delete cookies
We can create cookies with the document.cookie property.
document.cookie = "personName=Sagar Behare";
The cookie is deleted when browser is closed, but we can add expiry date also.
document.cookie = "personName=Sagar Behare expires=SUN, 30 Aug 2020 12:00:00 UTC";
By default, the cookie belongs to the current page but we can mention the path of the cookies.
document.cookie = "username=Sagar Behare; expires=SUN, 30 Aug 2020 12:00:00 UTC; path=/;";
We can read cookie in following ways.
var readVal = document.cookie;
We can edit or override cookies in same way that we create.
document.cookie = "username=Sagar Behare; expires=SUN, 30 Aug 2020 12:00:00 UTC; path=/;";
Deletion of cookies is very simple, just don’t mention the value.
document.cookie = "username=; expires=SUN, 30 Aug 2020 12:00:00 UTC; path=/;";
2. SessionStorage
The sessionStorage store the data only for one session. If we close the tab/browser session is closed. We can save the values in sessionStorage in terms of key-value.
Create / Read / Delete sessionStorage
Save data in sessionStorage
sessionStorage.setItem("personName", "Sagar Behare");
Read data from sessionStorage
var personName = sessionStorage.getItem("personName");
Remove data from sessionStorage
sessionStorage.removeItem("personName");
Remove all data from sessionStorage
sessionStorage.clear();
3. LocalStorage
The localStorage store the data permanently without any expiry. We lost data only case of delete cache of browser.
Create / Read / Delete localStorage
Save data in localStorage
localStorage.setItem("personName", "Sagar Behare");
Read data from localStorage
var personName = localStorage.getItem("personName");
Remove data from localStorage
localStorage.removeItem("personName");
Remove all data from localStorage
localStorage.clear();