Wondering which browser storages best fit your use case? Here's a brief comparison to help you with making decision:
| Session Storage | Local Storage | Cookies | |
|---|---|---|---|
| Storage Size | 5MB on browser | 10MB on browser | 4kb on browser or server |
| HTML support | HTML 5 | HTML 5 | HTML 4&5 |
| Accessibility | Own tab only | Across tab & windows | Across tab & windows |
| Expiry | Expires on tab close | No expiration | *Configurable |
| Updatable via | *Web Browser API | *Web Browser API | Server Side Request or *Web Browser API |
*Configurable Expiry: When a server responds to a browser request, it can send down a Set-Cookie header with one or many cookies, ex:
Set-Cookie: user_id=5; Expires=Fri, 5 Oct 2025 14:28:00 GMT; Secure; SameSite=Strict; HttpOnly
The HttpOnly Attribute
Cookies with the HttpOnly attribute are only accessible via HTTP(S). They are not accessible via JavaScript. Prevent XSS vulnerability.
The Secure Attribute
Cookies with the Secure attribute are only sent over an encrypted connection (HTTPS). It helps to reduce the potential damage of man-in-the-middle (MITM) attacks.
The SameSite Attribute
The SameSite attribute restricts the origin from which the cookie will be sent. It helps to prevent CSRF attacks.
*Web Browser API: see https://developer.mozilla.org/en-US/docs/Web/API for list of APIs
Reference: https://martinthoma.medium.com/cookies-742318b821c5
Top comments (3)
Great table, I will definitely bookmark this!
Which one the most secure on browser storages ?
don't think any of them provide security since all of them on the client side, unless u encrypt your data before storing them, have your application (server-side?) to decrypt every time you wanna access them.