Difference Between Local Storage, Session Storage And Cookies - GeeksforGeeks

19 Jan, 2022
The HTTP protocol is one of the most important protocols for smooth communication between the server and the client. The main disadvantage of the HTTP protocol it is a stateless protocol that means it does not track any kind of information of response and request by the server and the client, So in order to resolve this problem, there are three ways to track useful information In this article we are going to see the difference between Local Storage, Session Storage, and Cookies and why it’s important for a web developer to know these terms. 
Local Storage: This read-only interface property provides access to the Document’s local storage object, the stored data is stored across browser sessions. Similar to sessionStorage, except that localStorage data gets cleared when the page session ends – that is when the page is closed. It is cleared when the last “private” tab of a browser is closed (localStorage data for a document loaded in a private browsing or incognito session).
DOMStrings are storage formats that use UTF-16 to encode data, which uses two bytes per character. Strings are automatically generated from integer keys just as they are for objects. The data stored in LocalStorage is specific to a protocol in the document. If the site is loaded over HTTP (e.g., http://example.com), localStorage returns a different object than if it is loaded over HTTPS (e.g., https://abc.com).
If a document is loaded from a file: URL (that is, directly from the user’s local file system instead of being loaded from the server) the requirements for behavior are undefined and may vary among different browsers. Each file appears to be returned a different object by localStorage in all current browsers: URL. Essentially, it seems to be a case of each URL: file having its own unique local storage area.
This behavior cannot be guaranteed because as mentioned above, the file: URL requirements remain unclear. As such, there’s a possibility that browsers may change how they handle files at any time. The way some browsers handle it has evolved.
Local storage has 4 methods:
setItem() Method – This method takes two parameters one is key and another one is value. It is used to store the value in a particular location with the name of the key.localStorage.setItem(key, value)
localStorage.setItem(key, value)
getItem() Method – This method takes one parameter that is key which is used to get the value stored with a particular key name.localStorage.getItem(key)
localStorage.getItem(key)
removeItem() Method – This is method is used to remove the value stored in the memory in reference to key.localStorage.removeItem(key)
localStorage.removeItem(key)
clear() Method – This method is used to clear all the values stored in localstorage.localStorage.clear()
localStorage.clear()
image of local storage panel
What is Session Storage?
Session Storage objects can be accessed using the sessionStorage read-only property. The difference between sessionStorage and localStorage is that localStorage data does not expire, whereas sessionStorage data is cleared when the page session ends.
A unique page session gets created once a document is loaded in a browser tab. Page sessions are valid for only one tab at a time. Pages are only saved for the amount of time that the tab or the browser is open; they do not persist after the page reloads and restores. A new session is created each time a tab or window is opened; this is different from session cookies. Each tab/window that is opened with the same URL creates its own sessionStorage.When you duplicate a tab, the sessionStorage from the original tab is copied to the duplicated tab. Closing a window/tab ends the session and clears sessionStorage objects.
A page’s protocol determines what data is stored in sessionStorage. Particularly, data stored by scripts accessed through HTTP (for example, http://abc.com) is stored in a separate object from the same site accessed through HTTPS (for instance, https://abc.com). A DOMString number is two bytes per character in UTF-16 DOMString format. Strings are automatically generated from integer keys just as they are for objects.
Session Storage has 4 methods:
setItem() Method – This method takes two parameters one is key and another one is value. It is used to store the value in a particular location with the name of the key.sessionStorage.setItem(key, value)
sessionStorage.setItem(key, value)
getIteam() Method – This method takes one parameter that is key which is used to get the value stored with a particular key name.sessionStorage.getItem(key)
sessionStorage.getItem(key)
removeItem() Method – This is method is used to remove the value stored in the memory in reference to key.sessionStorage.removeItem(key)
sessionStorage.removeItem(key)
clear() Method – This method is used to clear all the values stored in the session storagesessionStorage.clear()
sessionStorage.clear()
image of session storage
Cookie: The term “cookie” refers to just the textual information about a website. In order to recognize you and show you results according to your preferences, this website saves some information in your local system when you visit a particular website. The history of the internet has long been marked by the use of cookies. A website visitor asks the server for a web page when they visit it. Every request for a server is unique. Likewise, if you visit a hundred times, each request will be considered unique by the server. Since a server receives many requests every second, storing every user’s information on a server doesn’t seem logical and obvious. The same information may not be needed again if you don’t return. Therefore, a cookie is sent and stored on your local machine to uniquely identify you. You will receive a response from the same server the next time you hit it since it recognizes you. Almost every server uses this cookie (some exceptions exist today because of advertisements). Therefore, although you might have many cookies in your system, such cookies will be recognized by a server and analyzed.
When cookies were first developed, they were used to better the developer’s experience. Consider visiting a website in a language other than your native one (let’s say English). You can select English as your language from the website’s language section. It might be necessary to switch languages five times a day if you visit the same website five times. These details are therefore stored in a cookie on your system. This ensures that the server knows that you wish to view the website in English the next time you send a request. Cookies are vital in this regard. The scale cookies used today are much smaller than the example above.
image of cookies
Difference Between Local Storage, Session Storage, And Cookies
provks
sneha030
Blogathon-2021
HTML-Questions
JavaScript-Questions
Picked
Blogathon
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
How to Create a Table With Multiple Foreign Keys in SQL?
How to Install Tkinter in Windows?
SQL Query to Create Table With a Primary Key
SQL Query to Convert Datetime to Date
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?