In an earlier article, we had already discussed the key characteristics and differences between local storage, session storage, and cookies. In this article, we are going to cover in what circumstances we should use each one of these types of storage.
When to use Session Storage
Session storage is useful if you need to be able to access data that is saved during a single user session, but you do not need this data to persist across multiple sessions.
As an example, your website might have a form with fields that are being filled out across a number of pages ("name" on page one, "email" on page two, and so on). Session storage can be used to remember the temporary data for a form that is being filled out over these different pages. That means that when you have reached page two, where you are filling out your email, the name you entered on page one would still be remembered by your browser.
But you only need this data to be remembered for the duration of the session. Once the user has submitted the form, there is no further need for the data to be stored in the browser. In this type of situation, session storage is recommended since it is best not to store data (especially potentially confidential information) for any longer than necessary. The fact that session storage clears at the end of a session means that the data stored there is less vulnerable to breaches. In addition, it is a more resourceful use of storage space since space is only used for a session.
When to use Local Storage
Local storage is similar to session storage in the sense that you can use it for storing information and persisting it throughout a user journey. What makes it different, however, is the fact that local storage data stays available even in subsequent sessions. That is to say, even after the browser is closed and reopened, the same data can be found in local storage. It doesn't have an expiration date and won't disappear unless it is actively cleared.
You would want to use local storage in situations where you would need to access data beyond a single session. An example could be if you were creating a simple to-do list and you want items to show up even in a later session. Suppose the user goes offline but still wants to see the items in the to-do list. The data could be pulled from local storage, which has preserved the data stored in earlier sessions.
You should be careful about how you store data in local storage, however. If you were using a public computer and your personally identifiable information (PII) was stored in local storage, other people who use that computer would be able to access the local storage data even if they are working in completely new browser sessions.
When to use Cookies
As you know from here, cookies work differently from local storage and session storage. Local storage and session storage work locally on the client side only, but cookies are involved in sending data between the server and the client on each HTTP request.
That said, like local storage and session storage, cookies can fulfill the function of data persistence. Cookies are unique since you can set expiration dates. If you don't set an expiration date for a cookie at all, it will function as a session cookie and only exist and persist data for a single session. If you want it to operate for a longer time, you can set an expiration date.
In addition to data persistence, however, cookies are frequently used for other purposes such as user authentication, storing user UI preferences, and exchanging data with third parties.
Cookies come with their own baggage, however, which you can learn about here: How Cookies Affect You.