Web Storage APIs: Local Storage and Session Storage

2 Views

养花风水

Web Storage APIs: Local Storage and Session Storage

养花风水

2 Views

Web Storage APIs: Local Storage and Session Storage

In web development, Web Storage API has become one of those things that we cannot ignore. They provide a means to store information on the client-side (browser). These APIs help websites remember information such as user preferences and also maintain state across various sessions or pages. Local Storage and Session Storage are probably the most used web storage mechanisms. Both allow end users to save data on the client-side but work differently in terms of its range and lifetime. Grasping these distinctions and understanding under which conditions they are most suitable for use can considerably enhance the efficiency and capability of web apps.

What is Web Storage?

Web Storage is a client-based storage system that lets web applications store key value pairs in a user's browser more conveniently. While cookies contain data that must be sent through the server with each HTTP request , data that has been stored in Web Storage is only available to JavaScripts on the Client side. Therefore, Web Storage has the potential of providing a better and less network intensive solution for storing data.

Web Storage has two primary components as outlined below:

1. Local Storage

2. Session Storage

Although both have similarities, it is important to know the variation between the two to be able to use them appropriately.

Local Storage

Local Storage is among the variety of Web Storage APIs that uses client-side storage to keep data on the web browser. Local Storage is unique in that data stored in it does not have an expiration time set and remains in the browser even when the user closes the browser or the tab. Because of this, Local Storage is best suited to store any information which must be accessed over multiple sessions.

Data held in the Local Storage is classified in key-value pairs and can be invoked through JavaScript programs belonging to the same domain as the data. Each domain (or origin) has its own isolated storage, so data stored for one website can not be accessed by another.

Local Storage Examples

  // Store data
 
localStorage.setItem("username", "john_doe");
// Retrieve data
 
let username = localStorage.getItem("username");  
// Remove data
 
localStorage.removeItem("username");

Local Storage has a good amount of space (in most cases, 5MB is the limit per origin) so it is best used to store non-sensitive such as user preferences, theme settings, app configurations etc. One point to keep in mind is that Local storage is available to any JavaScript running on that page which is why no sensitive information should go there as it does not get encrypted.

Session Storage

Like Local storage, Session Storage is also one of the Types of client storage. However, they do differ in one aspect:.Session Storage only contains data that was used during that page session, so the data contained is for that session only. A page session is active as long as the user has the browser tab opened. Once the tab or the browser is closed the data from the session storage will be deleted.

Session Storage Examples

  //store data
 
sessionStorage.setItem("sessionId", "12345");  
//get data
 
let sessionId = sessionStorage.getItem("sessionId");
//delete data
 
sessionStorage.removeItem("sessionId");

The beauty of Session Storage is that all the information is wiped out the moment the tab is closed. That's why it's helpful for forms with many steps, or even just browsing the same page.

How Local Storage Differs from Session Storage

Both Local Storage and Session Storage allow key-value pairs to be stored on the client-side. However, there are a few differences that set them apart. Knowing these differences makes it easier to choose the storage type best suited for the needs of your application.

1. Persistence

- Local Storage data does not get deleted simply by closing the browser or browser tab. It sticks around until the user or program explicitly deletes it.

- Session Storage data is removed once the browser tab is closed. It is session-oriented and when deleted, does not persist over different sessions or tabs.

2. Scope

- Local Storage can be accessed from any tab or window with the same origin (which is the domain).

- Session Storage is limited to a single tab of a web browser only. There is a unique Session Storage for every tab so one tab cannot access the Session Storage of the other tab even if both of them are on the same website.

3. Storage Size

- The noteworthy aspect is that both Local Storage and Session Storage allow a maximum of 5MB of data for each origin. Nonetheless, it is important to note that they have the same storage size which makes it irrelevant in this case.

4. Use Cases

- Local Storage : This is appropriate for information which is needed to exist longer than a single session – like user preferences or any tokens for authentication, token and data, application configuration and so on.

- Session Storage : This holds session specific information such as form input, IDs and so on that is only used during one particular session.

5. Data Access Restriction

- Local Storage and Session storage is only available to the single same origin which has the domain, port and protocol same. This avoids websites being able to read information stored by other websites.

Article