Синхронное обновление текста ввода в разных вкладках браузера

Условие

В приложении требуется реализовать механизм, который будет поддерживать одинаковое содержимое текстового поля во всех открытых вкладках браузера. При вводе или изменении текста в одном из инпутов, соответствующее значение должно автоматически появляться в аналогичных полях на остальных вкладках.

function App() {
  const [text, setText] = useState('');

  const handleChange = (value: string) => {
    setText(value);
  };

  return (
    <div className="app">
      <input onChange={(e) => handleChange(e.target.value)} />
    </div>
  );
}

Ответ

Свяжите input со state, записывайте изменения в localStorage и слушайте storage в других вкладках того же origin. Вкладка-источник обновляет state сама: своё storage-событие она не получает.

function App() {
  const [text, setText] = useState('');
  useEffect(() => {
    const sync = () => {
      try { setText(localStorage.getItem('shared-text') ?? ''); } catch {}
    };
    sync();
    const onStorage = event => { if (event.key === 'shared-text' || event.key === null) sync(); };
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, []);
  const change = value => {
    setText(value);
    try { localStorage.setItem('shared-text', value); } catch {}
  };
  return <input value={text} onChange={event => change(event.target.value)} />;
}

Это асинхронная межвкладочная синхронизация, не мгновенная общая память. При конфликте используется последнее сохранённое значение; недоступное хранилище оставляет поле локальным. Для эфемерных сообщений можно использовать BroadcastChannel. Секреты и чувствительный ввод в localStorage сохранять не следует.