DEV Community

0xkoji
0xkoji

Posted on

Diff Among cookie, localStorage, and sessionStorage

#webdev #javascript
Item Cookie Local storage Session storage
location Browser Browser Browser
data type string string string
expiration date can set semipermanent until close session/tab
capacity 4KB 5-10MB (depends on browser) 5-10MB (depends on browser)
send data to server yes no no
language server-side script(mainly) js js

Web Storage = Local storage + Session storage

As you can see, Local storage and Session storage are very similar, but there is one big difference.
That is expiration data LocalStorage can keep data until deleting it which means if a user closes a tab, still js code can use LocalStorage data. This sounds useful, but need to select the right data type.

data persistence

LocalStorage: will keep until users delete(probably delete cache) or the app remove/clear

SessionStorage: will keep until users close tab/window or the app remove/clear

Cookie: will keep until expires, users delete cookies or the app remove/clear

In terms of Cookie, we need to take care of each browser and time sync between client and server.

As you can see, 2 big differences are data size and sending data to the server.

How to use Local storage

set value 

localStorage.setItem('myDogName', 'Ral');

// we can store json 
localStorage.setItem('dogs', JSON.stringify(dogData));
Enter fullscreen mode Exit fullscreen mode

get value 

const myDog = localStorage.getItem('myDogName');

// of course, we can get data as json
const dogData = JSON.parse(localStorage.getItem('dogs'));
Enter fullscreen mode Exit fullscreen mode

remove value 

localStorage.removeItem('myDogName');
Enter fullscreen mode Exit fullscreen mode

clear this removes all data from localStorage 

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

How to use Session storage

In this article, I'm using js instead of backend scripts.

set value 

sessionStorage.setItem('myDogName', 'Ral');
Enter fullscreen mode Exit fullscreen mode

get value 

const myDog = sessionStorage.getItem('myDogName');
Enter fullscreen mode Exit fullscreen mode

remove value 

sessionStorage.removeItem('myDogName');
Enter fullscreen mode Exit fullscreen mode

clear this removes all data from sessionStorage 

sessionStorage.clear();
Enter fullscreen mode Exit fullscreen mode

How to use Cookie

set value 

document.cookie = 'my dog name was Ral'
Enter fullscreen mode Exit fullscreen mode

get value 

const data = document.cookie.split(':');

for(const elm of data) {
  const content = elm.split('=');
  console.log(content[1]);
}
Enter fullscreen mode Exit fullscreen mode

set expiration 

document.cookie = 'name="removed immediately"; max-age=0';
console.log(document.cookie);

// set 100 seconds
document.cookie = 'name="removed immediately"; max-age=0';
console.log(document.cookie);
Enter fullscreen mode Exit fullscreen mode

other options
https://javascript.info/cookie#path

cookies with nodejs
https://www.geeksforgeeks.org/http-cookies-in-node-js/

Top comments (2)

Collapse
 
painotpi profile image
Tarun Pai • • Edited

Good article!

Just a couple of feedback items,

  • Probably could've explained data persistance a bit more - especially for sessionStorage

  • Could've also expalined the security aspects of all 3 storage methods and what kind of data is typically stored in these individual APIs in real-world scenarios.

Collapse
 
0xkoji profile image
0xkoji •

@painotpi , thank you for your feedback.

just added some information on data persistence.

Read next

dev_bilal profile image

What is JavaScript ?

Muhammad Bilal -

ramadhan002 profile image

Axios interceptor + React JS

ramadhan.dev -

sty6x profile image

Scaling Zensearch's capabilities to query the whole database

FDiaz -

elanatframework profile image

Migrating Project from ASP.NET Core MVC to CodeBehind Framework

elanatframework -