Home > Web Front-end > JS Tutorial > body text

LocalStorage VS SessionStorage VS Cookie

Mary-Kate Olsen
Release: 2024-11-13 01:07:02
Original
1014 people have browsed it

LocalStorage VS SessionStorage VS Cookie

Cookies LocalStorage SessionStorage
Capacity 4kb 5-10 MBs (Browser Dependent) 5 MBs
Accessibility All windows All windows Private to tab
Expiration Manually Set Never expires On tab close
Passed in request Yes No No
Storage Browser and Server Browser Only Browser Only

Application

As you can seen main difference from above table. Here is the application of each storage type:

  1. LocalStorage - Usually data never expires and must stores non-sensitive data like user preference, application state etc.
  2. SessionStorage - Data is private to the tab and expires as soon as you close the window or tab. Suitable for storing temporary data that only needs to persist while a user navigates a single tab (e.g., form data before submission).
  3. Cookie - The storage capacity is very less and the data might require by the server like auth token or user preference.

Syntax

Cookie?

// below snippet will set username as key ?
// Johndoe as value ?
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting? the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
Copy after login

reading cookie

console.log(document.cookie) // Outputs all cookies? as a string
Copy after login

Session Storage?

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue
Copy after login

removing and clearing

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage
Copy after login

Local Storage?

Most comman storage type and all the functions are similar to the session type.

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();
Copy after login

LinkedIn ? ❤

The above is the detailed content of LocalStorage VS SessionStorage VS Cookie. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template