Cookie, Local Storage, and Session Storage in JavaScript

When working with web applications, there are three main ways to store data on the client-side: cookies, local storage, and session storage. While all three may seem similar, they have different use cases and limitations. In this article, we will explain the differences between these storage options and provide code examples to illustrate their usage in JavaScript.

What are Cookies?

A cookie is a small piece of data that is sent from a website to a user’s browser and saved on their computer. Cookies are commonly used to store user preferences, login information, and other data that can be accessed across different pages or sessions. Cookies have a maximum size limit of 4KB and can be set to expire after a certain amount of time or when the user closes their browser.

To set a cookie in JavaScript, we can use the document.cookie property. Here’s an example:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

In this example, we are setting a cookie named “username” with the value “John Doe”. We are also setting the expiration date to December 18, 2022, and the path to “/” (meaning that the cookie can be accessed across all pages on the website).

To retrieve a cookie in JavaScript, we can read the document.cookie property. Here’s an example:

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("username="))
  .split("=")[1];
console.log(cookieValue); // "John Doe"

In this example, we are splitting the document.cookie string into an array of individual cookie strings. We then use the find() method to locate the cookie with the name “username”. Finally, we split the string again to extract the value of the cookie.

What is Local Storage?

Local storage is another way to store data on the client-side. Unlike cookies, local storage has a much larger storage limit (usually around 5-10MB) and is not sent to the server with every request. Local storage data is stored locally on the user’s browser and can be accessed even after the user closes their browser.

Setting Local Storage in JavaScript

To set local storage in JavaScript, we can use the localStorage.setItem() method. Here’s an example:

localStorage.setItem("username", "John Doe");

In this example, we are setting a key-value pair in local storage with the key “username” and the value “John Doe”.

Retrieving Local Storage in JavaScript

To retrieve local storage in JavaScript, we can use the localStorage.getItem() method. Here’s an example:

const username = localStorage.getItem("username");
console.log(username); // "John Doe"

In this example, we are retrieving the value of the “username” key from local storage.

What is Session Storage?

Session storage is similar to local storage, but with one key difference: session storage data is cleared when the user closes their browser. This makes session storage useful for storing temporary data that should not persist across sessions.

Setting Session Storage in JavaScript

To set session storage in JavaScript, we can use the sessionStorage.setItem() method. Here’s an example:

sessionStorage.setItem("username", "John Doe");

In this example, we are setting a key-value pair in session storage with the key “username” and the value “John Doe”.

Retrieving Session Storage in JavaScript

To retrieve session storage in JavaScript, we can use the sessionStorage.getItem() method. Here’s an example:

const username = sessionStorage.getItem("username");
console.log(username); // "John Doe"

In this example, we are retrieving the value of the “username” key from session storage.

Conclusion

In summary, cookies, local storage, and session storage are all ways to store data on the client-side in web applications. Cookies are best used for small amounts of data that need to be accessed across different pages or sessions. Local storage is best used for larger amounts of data that should persist across sessions. Session storage is best used for temporary data that should not persist across sessions. By understanding the differences between these storage options, you can choose the best option for your specific use case and improve the performance and user experience of your web application.