DEV Community

loading...

Cookie, localStorage, or sessionStorage?

sandy8111112004 profile image Ming-Shiuan Tsai Updated on ・2 min read

Cookie, localStorage, and sessionStorage are all the simple data storage ways for client-side storage. Cookie is more like an old school way to handle the simple data stored on the client-side. In HTML5, web storage, such as localStorage or sessionStorage is introduced and it’s also easier to use.

Cookies

  1. Persistence: user can set expiration time for each cookies.
  2. Storage: there’s only about 4KB space for entire cookie data.
  3. Traffic: data needs to be sent back to the server for all the HTTP requests, which increases the traffic between client and server.
  4. Works for old browsers.

localStorage

  1. Persistence: data exist until it’s deleted
  2. Storage: available space increase to around 5 MB
  3. Traffic: less traffic because not all of the HTTP requests need to send data back to the server
  4. Domain: data only stays in the same domain, which means if data is stored on website A, next time it can only be accessed on website A. To be clear of the domain used here, it means the same website field. For example, whichever different posts or different personal pages in Facebook that you are browsing are all under facebook.com. As a result, those pages are all under the same domain.

sessionStorage

sessionStorage is similar to localStorage. The only difference will be the persistence of the data. For sessionStorage, once user leaves the domain, such as closing the tabs or windows, the sessionStorage is emptied.

How to use localStorage and sessionStorage?

Both localStorage and sessionStorage use key-value pair and their syntax are similar. Followings are the examples.

Syntax

//To store the data:
localStorage.setItem(key,value);

//To retrieve the data:
localStorage.getItem(key);

//To update the data (the same as to store the data):
localStorage.setItem(key,value);

//To remove one entry:
localStorage.removeItem(key);

//To clear all the data:
localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Discussion (8)

pic
Editor guide
Collapse
thluiz profile image
Thiago Luiz Silva

Nice post, I just missed some security considerations:

Just don't use localStorage or sessionStorage for sensitive data (like JWT tokens), both are vulnerable to XSS attacks.

Cookies, besides their limitations, have a much more mature model for sensitive data (If you use the correct flags like httpOnly, https and sameSite). This is the only point where you should use it instead of localStorage/sessionStoreage.

Collapse
sandy8111112004 profile image
Ming-Shiuan Tsai Author • Edited

That's a really good point!
Consider security issues, those sensitive data should not stay in front-end area because people can have access to it. The best way I feel would be to store those data in the database but not client side storage.

Collapse
stereobooster profile image
stereobooster

Nice post. A small addition to it

Traffic: data needs to be sent back to the server for all the HTTP requests, which increases the traffic between client and server.

In most cases this is true, but you can use fetch API to prevent this:

fetch(URL, {
  credentials: "omit"
})

On the other side if the browser supports fetch it is better to use sessionStorage or localStorage for client-side storage, and use cookies only for passing data to the server (for example for authentication).

Collapse
kissgyorgy profile image
Kiss, György

Cookies and localStorage/sessionStorage can be used for completely different purposes.
You compared apples to oranges. You can't make decisions on the server side based on localStorage, only with cookies.

Collapse
moopet profile image
Ben Sinclair

If you treat the question as just about how an app stores local information, then they're comparable.

It's more like: if you need the server to be involved without rolling your own system, use cookies, else use *Storage.

Collapse
meduzen profile image
Mehdi M.

Hi,

I strongly recommend the reading of Please Stop Using Local Storage. While localStorage is a great idea, it has flaws (not secure + can only stores strings + can’t work offline + generally limited to 5 MB of storage data) and should be avoided in favor of:

  • IndexedDB for various type of data (this small lib helps to use IndexedDb);
  • the Service Worker Cache API for network resources.

Like the article states, localStorage remains useful in a specific use case:

To keep it short, here’s the only situation in which you should use local storage: when you need to store some publicly available information that is not at all sensitive, doesn’t need to be used in a high performance app, isn’t larger than 5MB, and consists of purely string data.

Collapse
k0in profile image
K0IN • Edited

you can also save and store data like this
localStorage.key = "value";

Collapse
muramasah profile image
Felipe

You can, but is a better practice to use getters and setters. One of the most commont things I have to fix in legacy code are issues related with property mutations like that.