Как подписаться на изменения LocalStorage

Иногда есть необходимость подписываться на изменения значений в LocalStorage и быстро на них реагировать. В этой статье напишем универсальную реализацию на JavaScript, которая не будет привязана к определенному фреймворку. Нужно будет просто добавить необходимую прослойку. В React этой прослойкой будет являться кастомный хук, отвечающий за подписку/отписку на событие внутри useEffect. Реализация будет состоять из нескольких частей:

1. Реализация шины событий
2. Класс-обертка для работы с LocalStorage
3. Прослушивание нативного события storage
4. Добавление в React-компонент

Шина событий

Есть множество паттернов для реализации отправки и прослушивания изменений объектов. Возьмем за основу паттерн Pub/Sub (Издатель/Подписчик) и реализуем класс для шины событий.

// EventBus.js

class EventBus {
  constructor() {
    this.topics = {};
  }

  notify(key, value) {
    this.topics[key]?.forEach((cb) => {
      cb(value);
    });
  }

  subscribe(key, cb) {
    if (!this.topics[key]) {
      this.topics[key] = [];
    }
    this.topics[key].push(cb);
  }

  unsubscribe(key, cb) {
    this.topics = this.topics[key]?.filter((_cb) => _cb !== cb);
  }
}

Класс-обертка для работы с LocalStorage

Сервис для работы localStorage будет содержать экземпляр шины событий. При установке нового значения по ключу мы будем оповещать подписчиков этого ключа и сохранять значение в localStorage . При помощи метода subscribe можно будет подписаться на изменения значений по переданному ключу. Этот метод также возвращает функцию для отписки. Метод getItem просто отдает значение из localStorage по ключу. В нем при необходимости можно реализовать логику парсинга для чтения объектов из localStorage.

// LocalStorageService.js

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();
  }

  getItem(key) {
    return window.localStorage.getItem(key);
  }

  setItem(key, value) {
    const oldValue = this.getItem(key, value);
    if (oldValue === value) return; // если значение не изменилось - ничего не делаем

    window.localStorage.setItem(key, value);
    this.eventBus.notify(key, value);
  }

  subscribe(key, cb) {
    this.eventBus.subscribe(key, cb);
    return () => this.eventBus.unsubscribe(key, cb);
  }
}

// экспортируем экземпляр класса
export const localStorageService = new LocalStorageService();

Прослушивание нативного события storage

Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками. Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга. StorageEvent наследуется от класса Event и имеет следующие поля:

const storageEvent = {
  key: "token",              // ключ, значение которого изменилось
  newValue: "token_value_b", // новое значение
  oldValue: "token_value_a", // старое значение
  storageArea {              // объект хранилища со всеми ключами и их значениями
    token: "token_value_a",
    user_settings: "",
    length: 2
  },
  url: "http://localhost:3001/" // url документа, ключ которого изменился
}

Добавим подписку на событие storage.

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();

    this.handleStorage = this.handleStorage.bind(this);     // свяжем функцию с контекстом
    window.addEventListener('storage', this.handleStorage); // подпишемся на событие storage 
  }

  // добавим функцию для обработки события storage
  handleStorage(event) {
    this.eventBus.notify(event.key, event.newValue);
  }

  //…
}

Теперь если продублировать приложение в соседней вкладке и изменить токен, обновленный токен появится и на первой вкладке. Если изменить значение ключа в localStorage вручную через devtools, то обновленное значение также появится и в интерфейсе приложения.

Добавление в React-компонент

Добавим кастомный хук useLocalStorageKey, который будет принимать ключ, значение которого будет прослушивать.

// useLocalStorageKey.js

import { useEffect, useState } from 'react';
import { localStorageService } from './LocalStorageService';

export const useLocalStorageKey = (key) => {
  const [value, setValue] = useState(localStorageService.getItem(key));

  useEffect(() => {
    const onUpdate = (newValue) => {
      setValue(newValue);
    };

    // возвращаем функцию очистки
    return localStorageService.subscribe(key, onUpdate);
  }, [key]);

  // функция для изменений значения по переданному ключу
  const setLocalStorageValue = (value) => {
    localStorageService.setItem(key, value);
  };

  return [value, setLocalStorageValue];
};

И добавим вызов хука в компонент. Две кнопки просто устанавливают разные значения токена.

import { useLocalStorageKey } from './useLocalStorageKey';

const KEY_TOKEN = 'token';

function App() {
  const [token, setToken] = useLocalStorageKey(KEY_TOKEN);

  const handleAddTokenAClick = () => {
    setToken('token_value_a');
  };

  const handleAddTokenBClick = () => {
    setToken('token_value_b');
  };

  return (
    <>
      <button type="button" onClick={handleAddTokenAClick}>
        Add token 'a'
      </button>

      <button type="button" onClick={handleAddTokenBClick}>
        Add token 'b'
      </button>

      <p>Token: {token}</p>
    </>
  );
}

export default App;

Исходный код

Ревью пулл реквестов является неотъемлемой частью процесса разработки программного обеспечения. Оно позволяет команде разработчиков обмениваться мнениями, обсуждать и улучшать код, а также обнаруживать потенциальные ошибки и проблемы. Однако, чтобы провести качественное ревью, необходимо иметь чеклист, который позволит систематизировать процесс и убедиться, что все важные аспекты кода были рассмотрены. В этой статье мы рассмотрим основные пункты, которые должны быть включены в чеклист для проведения ревью пулл реквестов.

Функциональность

Проверьте, что код выполняет требования из задачи или спецификации. Убедитесь, что все функции работают корректно и не вызывают ошибок.

Архитектура и структура кода

Рассмотрите, соответствует ли код принципам SOLID и лучшим практикам проектирования. Проверьте, что код хорошо организован, читаем и понятен другим разработчикам.

Комментарии и документация

Проверьте наличие комментариев и документации. Комментарии должны быть четкими и информативными, а документация должна объяснять, как использовать код и его функции.

Тестирование

Убедитесь, что код сопровождается достаточным количеством тестов. Проверьте, что все тесты проходят успешно и покрывают основные сценарии использования.

Надежность и безопасность

Рассмотрите код с точки зрения безопасности и надежности. Убедитесь, что применены соответствующие меры безопасности и механизмы обработки ошибок.

Производительность

Проверьте, что код работает эффективно и не содержит узких мест. Рассмотрите возможные оптимизации и их реализацию.

Стиль кода

Проверьте, соответствует ли код стандартам оформления и стилю, принятым в команде или проекте. Убедитесь, что переменные и функции имеют осмысленные имена, и что код написан согласно соглашениям о наименовании.

Зависимости

Убедитесь, что код правильно использует и управляет зависимостями. Проверьте версии и совместимость используемых библиотек.

Развертывание

Рассмотрите, как код будет развертываться на сервере или установлен на конечном устройстве. Убедитесь, что весь необходимый функционал для развертывания присутствует.

Обратная связь

Не забывайте предоставлять конструктивную обратную связь разработчикам. Делитесь своими мыслями, идеями и предложениями по улучшению кода. Конечно, этот чеклист может быть адаптирован и дополнен в зависимости от специфики проекта и команды разработчиков. Главное - следовать основным принципам проведения ревью и стремиться к повышению качества кода.