Effective state management is crucial for creating dynamic and responsive web applications. This blog introduces two types of state variables in Superblocks – Local Storage variables whose value persists between user sessions and Temporary state variables whose value does not persist between user sessions. 

The problem

State variables refer to values that are stored in-memory to track the current state of a web application. State variables are used to maintain consistency and integrity of data across different parts of a web application. 

‍

It can be used to store user preferences, such as preferred language, theme, etc., that will persist between multiple sessions or browser restarts without needing to query an API/Database. Additionally, it is also used to improve application performance by reducing the need for unnecessary re-renders and API calls. For example, in a search feature that allows users to search a large dataset, instead of sending a request to the backend over a network, you can cache the data in a Temporary state variable and perform a client-side search.

‍

In frontend web development, there is a significant challenge in managing the dynamic and constantly changing data in a scalable and efficient way, while ensuring that updates to the state are accurately reflected in the user interface. Superblocks eases this pain point by providing a centralized and intuitive solution for managing and updating the application's state, where: 

1. You can define and manage the state of the application in a single location, which makes it easier to track changes and ensure that the state is updated consistently across all parts of the user interface.
2. You can use a simple interface to update and visualize your state variables, which helps reduce the amount of code that needs to be written and makes it easier for developers to work with state variables, especially in a large application.

In this post we'll walk through using Local Storage and Temporary Storage on this live Superblocks Application. Check out the state variables documentation to start using them in your Application.

Local Storage variables 

Local Storage state variables are key-value pairs stored in the client's web browser that persist across sessions. The scope of the Local Storage variables is limited to its Superblocks Application, meaning that the data stored in Local Storage is not accessible to other web applications, including Superblocks Applications. This provides a secure way to store user-specific data within a single web application.

‍

Local Storage variables should be used when you need to persist data within a single web application and the data does not need to be shared with other websites or applications. This makes Local Storage a good choice for storing user preferences, temporary data, or information that is specific to a single user session.

‍

For example, if you are building a task tracking application, you may want to bubble up the recently visited tasks to the top so they are easily accessible in case the users want to revisit a recently visited task quickly. Let’s walk through how you can build that in Superblocks.

‍

Below is a Task-tracking Application that allows you to see your team’s tasks.

When a user clicks on a task, you can use a state variable to keep track of the latest items visited by the user. In this case, a Local Storage variable called `RecentlyViewedTasks` is used to store an array of tasks ordered by the most recently visited tasks. 

Every time a user clicks on a task, you can update the `RecentlyViewedTasks` state variable and also use the same variable to order the table data to show the recently viewed tasks at the top of the list. This ensures the table always displays the recently accessed tasks in the front page, even when they start a new session in the future.

Temporary State variables

Temporary State variables are typically used to store temporary data that is needed within the context of a single component or a small set of related components that do not persist between user sessions. They can be used to track the state of UI elements, manage user interactions, or store intermediate results of computations.

‍

For instance, users can save a few new tasks as drafts and later bulk-create multiple tasks with just a click of a button. This is especially helpful for users who want to create all the tasks of an epic at once without having to commit one task at a time.

‍

Below is the task creation modal with a button to save the task as draft:

Every time the `Save as draft` button is clicked, you can append the task object to the `TaskDrafts` Temporary State variable.

You can use the `TaskDrafts` Temporary State variable to populate the `Unsaved Drafts` table so users can easily access and edit their previous drafts. They can also bulk-select drafts and click the `Bulk Upload Tasks` button to commit all the draft tasks at once.

Try out State Variables in Superblocks

Superblocks has helped thousands of developers save 100s of hours of time both in building and in using internal applications.

‍

To learn more about how to create internal Applications, Jobs, and Workflows with Superblocks, view our documentation. Try creating your first application today with a free 14-day trial​​.

‍