- Published on
useLocalStorage Hook React
![useLocalStorage Hook React](https://user-images.githubusercontent.com/33494971/269602373-9aa20fcb-72ca-49ca-902c-e5866a74bf0e.png)
useLocalStorage Hook React
useLocalStorage Code and Usage
useLocalStorage is a hook to interact with browsers local storage.
import { useState } from "react";
const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = (value) => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
};
// Usage
const LocalStorageExample = () => {
const [count, setCount] = useLocalStorage("count", 0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};