How Local Storage improves the performance
In the past many days, I learned about how frontend actually works and I learned lots of things. React is one of them. I learned how to manage state, how hooks work, how to make frontend faster and reliable, and the most important thing is how client-side data is actually stored using the local storage object.
If you don’t know, the local storage object is provided by all web platforms by default.
How Local Storage Works
Now that we know where local storage actually lives, the next question is how local storage actually works. Let’s imagine you open one website, you change the theme, you select your preference, and you refresh the page.
Now all your selected things or preferences get reset. And this is the problem. If your selected preferences or theme get reset, this creates a lack of user experience. To solve this problem, we actually use local storage.
Now you know about which problem we face and how it can be solved by local storage. So the next question may come: how does it work?
The working mechanism is when a user selects the preference or theme or any other things which boost user experience, then it is stored in client-side storage using local storage.
The data is stored in object format. All browsers provide around 5MB of local storage for one domain. When you first time access the local storage data, it is read from the disk and loaded into the RAM, and the browser keeps that data in cache for faster access in the future. Now the second time you need data, we don’t carry data from the disk, we already have it in cache. That improves the user experience.
Implementation of Local Storage
Now you know how local storage actually works under the hood. The next question might come: how do we implement local storage?
The answer is using the setItem and getItem methods of local storage. First we know about how to store created items or data in localStorage, after that we talk about how the API data is stored.
1) Store Created Data in Local Storage
To store data into local storage, we need two types of data. First is created data or data which is extracted from the response, and second is already stored data in localStorage.
Before combining, we need to convert stored data into an object. Now we combine both data and create one object. But we can’t store it directly into localStorage. To store data, first we need to convert that object into JSON format or string format. After converting into JSON or string format, we store it in localStorage using the setItem method.
This is the code:
const res = await axios.post("https://example.com/users");
const newData = response.data.data;
const existingData = JSON.parse(localStorage.getItem("user")) || {}; // Get old data
const mergedData = {
...existingData,
...newData
}; // Merge
localStorage.setItem("user", JSON.stringify(mergedData)); // Save again
In the code, “user” is the object where data is stored.
2) Store API Data with Deduplication
Now talk about the data which comes from the API. In this case, we again need two types of data. First is response data and second is the stored data which we need to convert into an object. After that, we combine both data, but we need to implement a filter for the data which is present in response and also in stored data, so we remove duplicate data. Now we merge into the object, convert into string, and store it into localStorage. This is the code:
const localData = JSON.parse(localStorage.getItem("bookings")) || []; // Get old data
const res = await axios.get("/api/shop/orders");
const apiData = res.data; // New data
const merged = [
...localData,
...apiData.filter((api) => !localData.some((local) => local.id === api.id)), // Filter the data which is already present
]; // Combine the data
localStorage.setItem('bookings', JSON.stringify(merged)); // Store the data
I am still learning frontend development, so if you find anything wrong or have suggestions, feel free to share your thoughts in the comments.
Thanks for reading!
Top comments (0)