Difference between Local Storage and Cookies

In this article, we discuss what is the difference between Local storage and Cookies and which one should we use in our client-side code. In web development, the two fundamental concepts play a crucial role in enhancing the user experience & enabling dynamic content delivery that is Local Storage and Cookies.

 

 

Both Local storage and cookies are used to store data on the client side but there are several key differences here is the list of comparisons between Local storage and cookies.

 

Difference between Local storage and Cookies

 

1. Storage limitation

•  Local Storage: Local storage provides more storage space (typically around 5-10 MB per domain)  compared to cookies.
•  Cookie: While Cookie space is limited to 4 KB of data per cookie, a domain can have a limited number of cookies.

 

2. Data Accessibility

• Local Storage: Data stored in Local Storage is not automatically sent with every HTTP request to the server. It’s accessible only on the client side.
• Cookie: The data stored in Cookies are automatically sent with every HTTP request to the server, both for the website and its associated subdomains. This can affect website performance as larger cookies may increase request size.

 

3. Expiration

• Local Storage: Data stored in Local Storage remains until explicitly cleared by the users.
• Cookie: Cookies can have expiration time, meaning they can be set to be deleted after a specific duration or when the browser session ends (session cookies).

 

Here are examples of how to use Local Storage and cookies in the client-side application:

 

Local Storage

 

// Storing data in LocalStorage

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

 

// Retrieving data from LocalStorage

const username = localStorage.getItem("username");

console.log(username); // Output: "john"

 

// Removing data from LocalStorage

localStorage.removeItem("username");

 

Cookie

 

// Setting a cookie with an expiration date (7 days from now)

const expirationDate = new Date();

expirationDate.setDate(expirationDate.getDate() + 7);

document.cookie = `username=john; expires=${expirationDate.toUTCString()}; path=/`;

 

// Retrieving data from cookies

const cookies = document.cookie.split('; ');

let username;

for (const cookie of cookies) {

const [name, value] = cookie.split('=');

if (name === 'username') {

username = value;

break;

}

}

console.log(username); // Output: "john"

 

// Removing a cookie (by setting an expiration date in the past)

const pastExpirationDate = new Date(0);
document.cookie = `username=; expires=${pastExpirationDate.toUTCString()}; path=/`;

 

Note – Remember that cookies are sent with each & every HTTP request to the server, so it would be great if you could avoid storing sensitive information in cookies. Use Local Storage for larger data storage needs on the client-side, and cookies for data that needs to be sent to the server with each request or for smaller bits of information like user preferences.

 

Conclusion

Local Storage and Cookies both bring unique strengths to web development. I hope now you will be able to define the difference between local storage and cookies and which one you can use to store data in the client machine.