The use-local-storage-state package makes it easier to persist data in the browser by abstracting the use of localStorage into a React Hook. It can save data and parse them automatically, and we can use it in multiple places in our app.
In this post, we’ll look at how to use the Hook to help us to more simply use localStorage in our React apps.
Getting started
To get started, we install the package by writing:
npm install use-local-storage-state
Then we can use it as follows:
import React, { useEffect } from "react";
import useLocalStorageState from "use-local-storage-state";
export default function App() {
const [todos, setTodos] = useLocalStorageState("todos", []);
useEffect(() => {
setTodos(["eat", "drink"]);
}, []);
return (
<div className="App">
{todos.map((t, i) => (
<p key={i}>{t}</p>
))}
</div>
);
}
We imported the useLocalStorageState Hook from use-local-storage-state, then put the Hook in our App component. To set the values of the component when the component loads, we use the useEffect Hook with an empty array in the second argument so that it only loads when App first renders. Once we do that, todos has the values from the Hook, and we can render them in the div we return.
If we look at the localStorage section of our browser console, which is under the Application tab of the Chrome console, we can see that the key is todos, which we set as the first argument of useLocalStorageState. Its value, ["eat", "drink"], is the array we called with setTodo. The Hook stringified the value for us without our using JSON.stringify, which is convenient.
Update localStorage
To update the localStorage value, we can write the following code:
import React, { useEffect, useState } from "react";
import useLocalStorageState from "use-local-storage-state";
export default function App() {
const [todos, setTodos] = useLocalStorageState("todos", []);
const [todo, setTodo] = useState("");
const onClick = () => {
setTodos([...todos, todo]);
setTodo("");
};
useEffect(() => {
setTodos(["eat", "drink"]);
}, []);
return (
<div className="App">
<input value={todo} onChange={e => setTodo(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map((t, i) => (
<p key={i}>{t}</p>
))}
</div>
);
}
We added an input element and an onClick handler to add entries to the todos array. This will automatically be saved in localStorage since we called the setTodos function returned by useLocalStorageState.
Deleting items
To delete a to-do item, we can write:
import React, { useEffect, useState } from "react";
import useLocalStorageState from "use-local-storage-state";
export default function App() {
const [todos, setTodos] = useLocalStorageState("todos", []);
const [todo, setTodo] = useState("");
const onClick = () => {
setTodos([...todos, todo]);
setTodo("");
};
const onDelete = index => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
useEffect(() => {
setTodos(["eat", "drink"]);
}, []);
return (
<div className="App">
<input value={todo} onChange={e => setTodo(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map((t, i) => (
<p key={i}>
{t} <button onClick={onDelete.bind(undefined, i)}>Delete</button>
</p>
))}
</div>
);
}
We added an onDelete function that calls filter on the todo array to return a new array without the specified index. We then pass the newTodos array that’s returned to setTodos.
To get the index to the function, we have onDelete.bind(undefined, i) in our onClick for the Delete buttons. bind returns a new function that has the arguments we want passed in, which, in this case, would be the index of the entry we want to delete.
Editing an item and using the same Hook in multiple places
To add edit functionality, we want to create a component to both display the value and to let us perform the edits. To do that, we write:
import React, { useEffect, useState } from "react";
import { createLocalStorageStateHook } from "use-local-storage-state";
const useTodos = createLocalStorageStateHook("todos");
const Todo = ({ name, index, onDelete }) => {
const [todos, setTodos] = useTodos();
const [todo, setTodo] = useState("");
const [editing, setEditing] = useState(false);
const save = () => {
const newTodos = [...todos];
newTodos[index] = todo;
setTodos(newTodos);
setEditing(false);
};
useEffect(() => {
setTodo(name);
}, []);
return (
<div>
{(() => {
if (editing) {
return (
<p>
<input value={todo} onChange={e => setTodo(e.target.value)} />
<button onClick={save}>Save</button>
</p>
);
} else {
return <p>{name}</p>;
}
})()}
<button onClick={() => setEditing(editing => !editing)}>Edit</button>
<button onClick={onDelete}>Delete</button>
</div>
);
};
export default function App() {
const [todos, setTodos] = useTodos();
const [todo, setTodo] = useState("");
const onClick = () => {
setTodos([...todos, todo]);
setTodo("");
};
const onDelete = index => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
<div className="App">
<input value={todo} onChange={e => setTodo(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map((t, i) => (
<Todo key={i} index={i} name={t} onDelete={onDelete.bind(this, i)} />
))}
</div>
);
}
In the code above, we created a Todo component to hold the to-do item with an input that allows us to edit the to-do. We also called the createLocalStorageStateHook function so that we can share the localStorage content in both Todo and App. In Todo and App, we use the useTodo Hook that’s returned by createLocalStorageStateHook.
In the save of Todo, we make a copy of the todos array and set the current value of todo according to the index value. We then call setTodo returned by useTodos to save the new todo item. Calling setEditing with false disables the input.
The onDelete function in Todo comes from App. We call bind on onDelete, then pass it in as the value of the onDelete so that it’s called with the right index. We can now click Edit, enter the new to-do value, and save the new value to localStorage.
Learn more →Also, note that we removed the useEffect Hook in App so that it retrieves the items from localStorage instead of resetting them with the value in that Hook. Now we get a complete to-do app that we can add, edit, and delete items with.
Conclusion
The use-local-storage-state package gives us an easy way to use localStorage in React apps. With it, we can create, update, and delete data with ease.
With this, we no longer need to use JSON.parse or JSON.stringify to deal with localStorage values. All we have to do is call the functions returned by the built-in Hooks, which save the values for us.
LogRocket: Full visibility into your production React apps
Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?
Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.
No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
