Storing Data in the Browser: localStorage, sessionStorage, and Cookies

  1. Home
  2. Blog
  3. Software Development
  4. Storing Data in the Browser: localStorage, sessionStorage, and Cookies

In the web development process, storing user preferences, session information, or temporary data in the browser is quite common due to the multiple accessibility features they offer. These data are needed in many parts of the project, and it is not efficient to fetch them by making requests and assigning them to variables every time we want to use them. Therefore, we prefer to categorize, store, protect, and retrieve the data based on their usage purposes or durations within the project.

Right at this point, three different concepts come into play for storing data that needs to be reused repeatedly: sessionStorage, localStorage, and cookie. So, let's take a closer look at what these are.

 

Storing Data in the Browser: localStorage, sessionStorage, and Cookies

What is sessionStorage, and Where is it Used?

sessionStorage is a web browser feature used to store data that is valid for the duration of a session. It provides separate storage for each browser tab or window, and the data is automatically deleted when the browser is closed.

This storage method allows the temporary storage of information in the browser and is usually used throughout the session. In other words, the data written to sessionStorage is lost when a user opens a new browser window or closes the browser. The advantages and disadvantages of sessionStorage can vary depending on the usage scenarios, but for scenarios involving temporary data storage, they can be listed as follows:

 

Advantages:

-        Allows the storage and retention of temporary data without overloading memory.

-        Provides storage space of up to 5 MB.

-        Data stored in sessionStorage is kept on the user's computer and is not sent to the server. Therefore, storing information without communication with the server can be secure.

-        Simple and easy to use.

Disadvantages:

-        Readable only on the client side.

-        Stores data as a string array.

 

 

Examples of use cases for sessionStorage include:

-        Storing temporary user information.

-        Storing temporary data specific to the current page and situation.

-        Storing instant user inputs and resetting them in each session.

In these scenarios involving temporary conditions, sessionStorage can be utilized.

 

What is localStorage, and Where is it Used?

‘localStorage’,  is a method used for storing information on the front end of a web browser. The key feature of this method is that it persists in memory as long as it is not manually cleared. Even if the user closes the browser window or tab, the data stored in this storage area is preserved for a certain period (typically until manually cleared by the user).

 

Advantages:

-        Can be stored indefinitely.

-        Provides storage space of up to 5 MB.

-        Since the data is never transferred to the server, it is more secure.

 

Disadvantages:

-        Readable only on the client side.

-        Stores data as a string array.

-        Occupies space if not deleted by the user or the program.

 

Examples of use cases for localStorage include:

-        Bringing back each item entered by the user in a Todo List application upon the next opening.

-        In a filtered query page, keeping query data in memory, allowing the same query to be performed when returning to the page.

 

What is a Cookie, and Where is it Used?

A cookie is a small text file stored on a user's computer by a web browser. These files are sent to the browser by websites and stored on the user's computer. Cookies are commonly used to store user session information, preferences, and other personal data.

Cookies also have the capability of cross-origin storage, meaning they can facilitate data transfer between different websites with the same root domain. 

For example; they can enable data flow between site1.com and sub.site1.com.

 

Use Cases:

Session Management:

Cookies are used to track the user's login status. When a user logs in, the server creates a cookie and sends it to the browser, which stores the cookie. This ensures that the user's session information is preserved, and even if the browser window is closed, the user's login is remembered.

 

Personalization:

Cookies are employed to store user preferences and site-specific settings. For instance, language preferences, themes, or similar choices made by the user can be stored via cookies.

 

Analytical Data Collection:

Cookies can be used to collect website usage statistics. Analytical tools like Google Analytics utilize cookies to analyze data such as visitor numbers and page views.

 

Advertising Targeting:

Cookies can be utilized for targeted advertising based on a user's browsing habits. This allows advertising companies to display ads according to the user's interests.

 

Comparison of sessionStorage, localStorage, and Cookies:

  cookie localStorage sessionStorage
Size Limitations Generally 4 KB Generally 5 MB Generally 5 MB
Communication with Server Automatically sent with every HTTP request No automatic send to the server, stored only on the client side No automatic send to the server, stored only on the client side
Time Control Expires at a specific date No time control, data is persistent until manually cleared Cleared automatically when the browser window or tab is closed
Cross-Origin Storage Yes No No
Security Potential security issues, HTTPS usage is important More secure, HTTPS usage recommended More secure, HTTPS usage recommended
Use Cases Session management, preferences, analytical data Large data storage, independent of the server Storage of temporary information, as long as the browser window is openStorage of temporary information, as long as the browser window is open

 

This table highlights the distinctions between “cookie”, “localStorage”, and “sessionStorage” regarding various features and functionalities. The selection of the appropriate storage method should align with the specific requirements and objectives of the project.

Hatice AKSOY KILIÇ

Follow us!