Introduction
When developing lightweight applications - we may want to store some data. If a database is overkill - there's a great alternative: localStorage!
While it doesn't replace a database for, well, database purposes, it does serve as a simple file-based storage system that you can leverage to store easily-accessible data points.
In this article, we will learn how to use
localStorageto easily store data in our browser. This data is saved as key-value pairs that the user can easily retrieve.
Saving data to localStorage in React is super easy:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
If you're not in a hurry and want to learn more about how this works, keep reading!
What is localStorage?
localStorage is a web storage object that enables developers to store key-value pairs in a web browser and ensures that this data survives all page refreshes, even when a user closes or restarts a browser - and it has no expiration date. Stored key-value pairs can include any type of data - arrays, objects, strings, numbers, and many others.
However, this cannot replace the role of databases in your websites and web apps because data is lost when a user clears the browser's cache and local storage - ultimately, it's local storage and should be used as such. Nonetheless, there are situations in which a user can use localStorage, such as implementing the dark mode feature, persisting a user's form input value, and many others.
localStorage has built-in methods that allow us to access the browser's storage object. One example is the setItem() method, which allows us to add a key and a value to localStorage, therefore enabling us to store data. Other methods are used to retrieve data - getItem(), delete data - removeItem(), clear all localStorage instances - clear(), and so on.
Storing Data to localStorage With the setItem() Method
The setItem() method allows us to save values of any data type to localStorage by assigning values to keys, resulting in a key-value pair. This key would be used to retrieve the corresponding value whenever we want to retrieve it from localStorage.
Note: In order to store data in localStorage, we must first convert it to JSON string using the JSON.stringify() function. And when we want to retrieve it, we will parse the data using JSON.parse(), converting the JSON string back to a JSON object.
When working with data in React, we frequently use hooks to help us store/hold it. Hooks can also help us find where to upload that data. This also applies to localStorage because we will use the useState() and useEffect() hooks. These hooks are critical because the useState() hook is used to hold and set data, whereas the useEffect() hook is triggered by default after the first render and whenever the state passed as the second parameter changes.
After explaining the foundation, here is the code we would use to store data in localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
We've first created a state to hold the data we want to store in our localStorage, and then we've created a useEffect() hook, passing the state as the second parameter. That way, whenever the state changes, the data in the localStorage is updated to the current value.
We handled the core functionality, which is used to assist us in data storage, within the useEffect() hook:
localStorage.setItem('dataKey', JSON.stringify(data));
Conclusion
In this article, we learned how to use React hooks to store data in React using localStorage. As previously stated, this will never replace the role of a database, but rather will assist us in storing some user-related data that can improve the UI but isn't meant to be persisted independently of the browser.
