The useLocalStorage custom hook from the pol-ui library enables you to manage state in the localStorage of the client's browser. It provides a convenient way to persist and synchronize state across different components or tabs.


Make sure you have the pol-ui library installed:

import { useLocalStorage } from "pol-ui";


import { useLocalStorage } from "pol-ui";
function MyComponent() {
  const [value, setValue] = useLocalStorage("myKey", "defaultValue");
  // Use the value and setValue as you would with useState
  // ...
  return (
      <p>Value from localStorage: {value}</p>
      {/* Other components and logic */}


  • key (string): The key under which the value is stored in localStorage.
  • initialValue (T): The initial value to use if no value is found in localStorage.

Return Value

An array containing the current value and a function to set a new value:

  • value (T): The current value from localStorage.
  • setValue (function): A function to set a new value in localStorage.


import { useLocalStorage } from "pol-ui";
function ExampleComponent() {
  const [count, setCount] = useLocalStorage("count", 0);
  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  return (
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>


  1. The hook uses the localStorage API to store and retrieve values. It automatically converts values to JSON format before storing and parsing them upon retrieval.

  2. It provides a mechanism to listen for changes to localStorage across different components or tabs using a custom event.

  3. Be cautious about storing sensitive information in localStorage as it is accessible to JavaScript running on the same domain.

Since March 1, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores