localStorage

Sample

Using plain JS to get and set a value localStorage as part of the browser’s Storage API.

This component persists data in localStorage so it will remember values across a page refresh or restarting the browser.

If the key is not present, the value will be null, so we use ?? to detect that and fallback to an empty string (to avoid a warning from useState).

import React from "react";

function TextSample() {
  const persistedValue = localStorage.getItem("name") ?? "";
  const [value, setValue] = React.useState(persistedValue);

  const onInput = (event) => {
    setValue(event.target.value);
  };
  
  React.useEffect(() => {
    localStorage.setItem("name", target);
  };

  return (
    <div>
      <label hmltfor="name-input">Name: </label>

      <span> </span>

      <input
        id="name-input"
        value={value}
        onInput={onInput}
        placeholder="World"
      />

      <br />
      <br />

      <div>{value}</div>
    </div>
  );
}

I found it worked fine to put the localStorage.setItem bit in the onInput handler. But, from this thread on StackOverflow, I decided to refactor use useEffect instead, as that it intended for managing side effects. See my React Hooks cheatsheet for more info.