LocalStorage и SessionStorage

В экосистеме JavaScript веб-хранилища localStorage и sessionStorage позволяют сохранять данные на стороне клиента. В рамках Quasar эти механизмы интегрируются через стандартный API браузера, но Quasar добавляет удобные утилиты и подходы для их эффективного использования.

Различия между LocalStorage и SessionStorage

LocalStorage сохраняет данные без ограничения по времени, даже после закрытия браузера. Объём хранилища обычно ограничен 5–10 МБ, зависит от браузера.

SessionStorage действует только в рамках текущей сессии. После закрытия вкладки данные удаляются.

Ключевые моменты:

  • LocalStorage подходит для долговременных настроек, пользовательских предпочтений и токенов (если безопасность позволяет).
  • SessionStorage используется для временных данных, например состояния форм или текущих шагов многошагового процесса.

Работа с LocalStorage в Quasar

Quasar предоставляет возможность использовать LocalStorage через собственный модуль @quasar/quasar-app-extension-localstorage, но чаще применяется стандартный API:

// Сохранение данных
localStorage.setItem('user', JSON.stringify({ name: 'Ivan', role: 'admin' }));

// Получение данных
const user = JSON.parse(localStorage.getItem('user'));

// Удаление данных
localStorage.removeItem('user');

// Очистка всего хранилища
localStorage.clear();

Особенности использования в Quasar:

  • Данные часто сохраняются в формате JSON для упрощения работы со сложными структурами.
  • Обертки и утилиты позволяют автоматически сериализовать и десериализовать объекты.

Пример создания утилиты для работы с LocalStorage:

export const storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  get(key, defaultValue = null) {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : defaultValue;
  },
  remove(key) {
    localStorage.removeItem(key);
  },
  clear() {
    localStorage.clear();
  }
};

Теперь взаимодействие с хранилищем сводится к простым вызовам:

storage.set('theme', 'dark');
const theme = storage.get('theme', 'light');

Работа с SessionStorage

С API SessionStorage работа идентична, но данные живут только в текущей сессии:

// Сохранение данных
sessionStorage.setItem('step', '2');

// Получение данных
const step = sessionStorage.getItem('step');

// Удаление данных
sessionStorage.removeItem('step');

// Очистка хранилища
sessionStorage.clear();

Можно создать аналогичную обертку для удобного использования:

export const session = {
  set(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value));
  },
  get(key, defaultValue = null) {
    const stored = sessionStorage.getItem(key);
    return stored ? JSON.parse(stored) : defaultValue;
  },
  remove(key) {
    sessionStorage.removeItem(key);
  },
  clear() {
    sessionStorage.clear();
  }
};

Интеграция с Vue-компонентами Quasar

В Quasar + Vue данные из LocalStorage или SessionStorage можно автоматически синхронизировать с состоянием компонентов через computed или ref.

Пример синхронизации с темой интерфейса:

import { ref, watch } from 'vue';
import { storage } from 'src/utils/storage';

const theme = ref(storage.get('theme', 'light'));

watch(theme, (newTheme) => {
  storage.set('theme', newTheme);
});

Такое решение обеспечивает:

  • Сохранение настроек между сессиями.
  • Автоматическое обновление хранилища при изменении состояния.

Безопасность и ограничения

Важно учитывать:

  • Данные в LocalStorage и SessionStorage доступны на стороне клиента и могут быть прочитаны любым скриптом на странице.
  • Не хранить конфиденциальные данные (пароли, ключи API) без шифрования.
  • Ограничение по размеру данных (~5 МБ), поэтому лучше хранить минимальные объёмы.
  • SessionStorage ограничено вкладкой — нельзя обмениваться данными между вкладками напрямую.

Дополнительные возможности Quasar

Quasar предоставляет удобные плагины и composables для работы с хранилищем, например:

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

Пример реактивного состояния с использованием composable:

import { reactive, watch } from 'vue';
import { storage } from 'src/utils/storage';

const settings = reactive(storage.get('settings', { language: 'ru', notifications: true }));

watch(settings, (newSettings) => {
  storage.set('settings', newSettings);
}, { deep: true });

Это позволяет легко поддерживать актуальные пользовательские настройки без ручного обновления LocalStorage после каждого изменения.

Практические рекомендации

  • Для данных, которые важны для всего приложения и должны сохраняться между сессиями — использовать LocalStorage.
  • Для временных состояний, актуальных только в рамках одной вкладки — SessionStorage.
  • Обернуть стандартные API в утилиты для упрощения сериализации/десериализации и минимизации повторного кода.
  • Использовать реактивные объекты Vue для автоматической синхронизации состояния компонентов с хранилищем.
  • Минимизировать объём данных, чтобы избежать проблем с ограничением памяти браузера.

Такая организация работы с LocalStorage и SessionStorage в Quasar обеспечивает удобство, безопасность и масштабируемость приложения.

Оглавление