40. What is the difference between localStorage, sessionStorage and cookies in JavaScript? Explain with the help of examples when would you prefer to use one over the other?
LocalStorage, sessionStorage, and cookies are all mechanisms for storing data on a client-side browser. Each has its own unique characteristics and use cases.
LocalStorage is a key-value pair storage system that allows you to store data locally on the user's machine. The data stored in localStorage persists even after the user closes the browser or restarts the computer.
const name = 'John';
localStorage.setItem('name', name);
// retrieve name from localStorage
const storedName = localStorage.getItem('name');
console.log(storedName); // logs "John"
LocalStorage is useful for storing data that needs to persist across browser sessions or even after the user closes the browser.
SessionStorage, on the other hand, is a similar key-value pair storage system that allows you to store data temporarily during a browser session. The data stored in sessionStorage is lost when the user closes the browser or restarts the computer.
const name = 'John';
sessionStorage.setItem('name', name);
// retrieve name from sessionStorage
const storedName = sessionStorage.getItem('name');
console.log(storedName); // logs "John"
SessionStorage is useful for storing data that needs to be temporary and lost when the user closes the browser or restarts the computer.
Cookies are small text files that are stored on the user's machine. Cookies can store any type of data, including strings, numbers, and objects. Cookies are sent between the server and the client with every request and response.
const name = 'John';
document.cookie = `name=${name}; path=/`;
// retrieve name from cookies
const storedName = document.cookie.match(/name=(.*)/)[1];
console.log(storedName); // logs "John"
Cookies are useful for storing data that needs to be sent between the server and the client, such as authentication tokens or session IDs.
In summary, localStorage is useful for storing data that needs to persist across browser sessions or even after the user closes the browser. sessionStorage is useful for storing data that needs to be temporary and lost when the user closes the browser or restarts the computer. Cookies are useful for storing data that needs to be sent between the server and the client.
Here's an example of how you might use each storage mechanism:
- LocalStorage: Store a user's name in localStorage when they log in, so it persists even if they close the browser or restart the computer.
const name = 'John';
localStorage.setItem('name', name);
- SessionStorage: Store a user's session ID in sessionStorage during each browser session, so it is lost when the user closes the browser or restarts the computer.
const sessionId = generateSessionId();
sessionStorage.setItem('sessionId', sessionId);
- Cookies: Store an authentication token in a cookie that is sent with every request and response between the server and the client.
const authToken = generateAuthToken();
document.cookie = `authToken=${authToken}; path=/`;
Overall, the choice of storage mechanism depends on the specific use case and requirements.