HTML5 and JS - Web storage and cookies
Hello developers, as all we know that javascript is one of the great client side programming language. It is one of the most popular client side scripting language of 2017(you can find it in on some websites on google search, here it is on 1st place, here 4th place, here 7th place).
Why JavaScript is useful?
Sometimes it is necessary to store information on client side so that it could be used on different pages.
Sometimes we need to perform various actions and manipulate HTML elements.
It is very useful and mandatory to validate form values on client side as it decreases some of the validations to be performed on server side.
Javascript allows us to do all these things.
It is really great. Today I want to discuss about storing information on client side by using webStorages and cookies.
While creating website SureCabs(https://surecabs.in/) I used localStorage as it allowed me to use information stored on first page into another.
Let me brief each of these(cookies, localStorage, sessionStorage) one by one.
So take little rest if you are tired then keep moving on with the remaining one. We will see usages, limitations etc.
How to store information on client side using JS?
In JavaScript, we use cookies and web storages(localStorage, sessionStorage) to store information on client side.
Cookie: Cookies are defined as data stored on small text files on our computer.
Cookies are used to store information on client side. You can store username, profile link, contact number etc. or whatever you want.
So you don't need to request for the same information from server again and again.
//Setting cookie named fullname
document.cookie = "fullname=Raj Chen";
//We can set expiry time(UTC) also
??document.cookie = "fullname=Raj Chen; expires=Mon, 14 May 2018 12:30:00 UTC";
?
/*By default cookie belongs to the current page. You can set path for cookie*/
??document.cookie = "fullname=Raj Chen; expires=Mon, 14 May 2018 12:30:00 UTC; path=/;";
?
//Reading cookie(GETTING COOKIE)
var myCookie = document.cookie;
//Deleting cookie(set expires to the passed date time)
//You don't need to provide cookie value but path is necessary to delete specific cookie?
?document.cookie = "fullname=; expires=Mon, 26 Aug 2017 12:00:00 UTC; path=/;";
One more thing to notice here is that we only stored fullname in cookie.
Think about the situation where you have to store multiple information like(age, username, profile_url, dob etc.).
Just create an object and store all the information and stringify it while setting cookie as follows.
//Creting object
?var details = {"name": "Rishikesh Agrawani", "age": 25, "dob": "14 May 1992"}
//Converting object named details into string form
var details_str = JSON.stringify(details)
//Setting cookie? named => mydata
?document.cookie = "mydata="+ details_str +"; expires=Mon, 14 May 2018 12:30:00 UTC; path=/;"
/*
'mydata={"name":"Rishikesh Agrawani","age":25,"dob":"14 May 1992"}; expires=Mon, 14 May 2018 12:30:00 UTC; path=/;'
??*/?
You can visit W3schools - JS Cookie and get more details about processing cookies. Let me brief localStorage now.
localStorage: localStorage allows web applications to store data locally within user's browser.
localStorage are more better than cookies as it has more storage capacity than cookies as well as data storing, retrieving operations are also very easy. It can store data with no expiration date and time. Our data will not be deleted if browser is closed. Let us see how to set, get, delete data.
/* Checking whether browser supports localStorage or not */
if(localStorage)
{
alert("Your browser supports localStorage");
} else {
alert("Your browser does not support localStorage");
}
/* Storing data using setItem() method */
localStorage.setItem("name", "Hemkesh Agrawani")
localStorage.setItem("age", 23)
/* Storing data using array assignment syntax*/
localStorage["username"] = "Hemkesh67"
/* Getting data value */
var myName = localStorage.getItem("name") //?Hemkesh Agrawani
/* Removing/Deleting data value */
localStorage.removeItem("name")?
/* Delete all data from localStorage */
localStorage.clear()?
sessionStorage: sessionStorage is same as localStorage except that the data that we store in sessionStorage is for a specific session. Once the browser is closed the data get deleted/lost.
sessionStorage is useful for transactional and less secure websites. It supports all the methods supported by localStorage. Let us see it in below example.
/* Checking whether browser supports sessionStorage or not */
if(sessionStorage)
{
alert("Your browser supports sessionStorage");
} else {
alert("Your browser does not support sessionStorage");
}
/* Storing data using setItem() method */
sessionStorage.setItem("name", "Hemkesh Agrawani")
sessionStorage.setItem("age", 23)
/* Storing data using array assignment syntax*/
sessionStorage["username"] = "Hemkesh67"
/* Getting data value */
var myName = sessionStorage.getItem("name") //?Hemkesh Agrawani
/* Removing/Deleting data value */
sessionStorage.removeItem("name")?
/* Delete all data from sessionStorage */
sessionStorage.clear()?
References:
?Please see these reference links tutorialhorizon, tutorialrepublic, developer.mozilla.org, Stackoverflow related to localStorage, sessionStorage and cookies.