Guarda el estado de una aplicación con LocalStorage

How to use Local Storage to store the state of an application?

When developing a web application, maintaining state across user sessions is crucial to provide a consistent experience. Local Storage is a powerful tool that allows us to store data in the browser. This ensures that even if the user closes or refreshes the page, the changes persist. In the class we will discuss how we can implement local storage to enhance our application, ensuring that all modifications made by the user remain intact.

Why use effects to handle Local Storage?

The use of effects in JavaScript is fundamental when we want to handle side effects, those changes that occur outside the reactivity and rendering system of our application. In this case, effects allow us to react automatically to changes in the application and update the local storage according to these changes. This is the strategy we will follow:

1. Create an effect:

   • We use the createEffect primitive to detect when there are changes in our task list (all).
   • We implement localStorage.setItem inside the effect to store a copy of the list state in the local storage.

   createEffect((() => { localStorage.setItem('all', JSON.stringify(all));});

2. Change Observation:

   • Changes to the task list trigger the effect, because these lists work as proxies, with internal traps.
   • Each modification is instantly reflected in the local storage.

How to initialize the application with stored data?

To ensure that our application starts with the data that the user saved last time, we must initialize the state with the information from the local storage:

1. Retrieve data from Local Storage:

   • We use JSON.parse to convert the data stored as a string into a usable JavaScript object.
   • If there is no data in the local storage, the application must fall back to default values.

   const allLocalStorage = JSON.parse(localStorage.getItem('all')) || [];

2. Store initialization:

   • When creating the application's store, we use todosLocalStorage.
   • This ensures that every time the user returns to the application, the previous data persists.

How to remember the dark mode preference?

Saving the dark mode preference is another important aspect, especially in terms of user experience. Let's see how to do it:

1. Accessing and saving the mode:

   • Store the preference each time the user performs a dark mode toggle.
   • We compare the string stored in local storage with "true" to define the initial state.

   const darkMode = localStorage.getItem('darkMode') === 'true';

2. Implement the change effect:

   • As with the task list, creating an effect helps to save the dark mode state.
   • This effect also makes sure that the change in the body class occurs in parallel with the change in storage.

   createEffect((() => { localStorage.setItem('darkMode', darkMode.toString());});

3. Example usage:

   • When the dark mode changes, we immediately update local storage and the user interface reflects the current choice.

Application Challenges and Enhancements

Finally, for those who wish to deepen their learning, an interesting challenge is presented: create an additional list to store only the items marked as completed. This exercise will challenge your logic and consolidate your understanding of topics covered in the course. The implementation of two lists invites us to use cycles and to differentiate derived signals, encourage you to try and continue learning while structuring your application in a more robust and dynamic way!