2

There is a certain setting I want to store only for the current browser session (till the browser window is not closed)

I have 2 options:

  • set a cookie with no max-age (treated as session cookie)
  • use sessionstorage

To store session data, what are the difference between using a cookie with no max-age Vs sessionstorage?

dragonmnl
  • 14,578
  • 33
  • 84
  • 129

2 Answers2

1

the main difference is that cookies and sessions are stored in different places.

Cookies are stored in the user's browser and are sent with every request from the user to the server. This means that you have to be careful about the size of the data you want to store and make sure you don't store any sensitive data in it (unless you encrypt the data before you store it in the cookie).

Sessions store the data on the server so you don't have to worry to much about size and security. For the server to know which session data belongs to what request a cookie is used which is marked to expire when the browser window is closed.

So, depending on what data you want to store you can use either.

John Caprez
  • 393
  • 2
  • 10
  • Thanks for the explanation. However sessionstorage was referring to the sessionstorage api (client-side). Feel free to update your answer and I'll be glad to accept it (comment here so I get a notification) – dragonmnl Jul 30 '20 at 17:12
1

Session cookies and Window.sessionStorage solve different problems.

Cookies

Cookies are meant to pass data between a browser and server. When your browser stores cookies for a website, future requests to the site will include the cookies associated with this site (HTTP Cookie header). The server can also update your browser's cookies with the Set-Cookie HTTP response header.

Session cookies are often used to maintain a "server session" by passing a session token to the server on every request. The server uses this token to look up session data on the server associated with the token.

Web Storage API

The Web Storage API (localStorage and sessionStorage) is meant for storing data only within the browser. This data is not automatically passed between the browser and server.

Session cookie vs sessionStorage

Concept of "session"

Session cookies and sessionStorage have a different concept for a "session".

For session cookies, a session is shared between all browser tabs accessing the same site, and it ends when all browser windows are closed.

For sessionStorage, each tab (or "browsing context") has its own unique session, and the session ends when the tab is closed. This could be thought of more like a "tab session" than a "browser session".

So if you want to share data between multiple tabs, sessionStorage alone won't do the trick. You can use localStorage, session cookies, or other alternatives to synchronize this data.

Storage size

Cookies are much more limited in size than sessionStorage. This makes sense if you understand that cookies are passed to the server for every request. The maximum sizes vary by browser. Take a look at these StackOverflow posts for more details:

Defending against XSS

Cookies marked with the HttpOnly attribute are inaccessible to JavaScript running on the page. This can be handy to defend against Cross Site Scripting (XSS) attacks.

Michael R
  • 1,753
  • 20
  • 18