Работа с sessionStorage

Gridstack.js — это мощная библиотека для создания динамических сеток и дэшбордов на основе JavaScript. Одной из ключевых задач при разработке интерактивных интерфейсов является сохранение состояния сетки между перезагрузками страницы или при навигации по приложению. Для этой цели отлично подходит объект sessionStorage, предоставляющий временное хранилище данных на уровне сессии браузера.

Основы sessionStorage

sessionStorage позволяет хранить данные в формате ключ–значение. Эти данные доступны только в рамках текущей вкладки и автоматически удаляются при закрытии вкладки. Основные методы:

sessionStorage.setItem(key, value) — сохранить значение под ключом.
sessionStorage.getItem(key) — получить значение по ключу.
sessionStorage.removeItem(key) — удалить значение по ключу.
sessionStorage.clear() — очистить всё хранилище для текущей сессии.

Важно помнить, что sessionStorage хранит только строки. Для объектов необходимо использовать сериализацию через JSON.stringify и десериализацию через JSON.parse.

Сохранение состояния сетки Gridstack.js

Gridstack.js предоставляет API для получения текущего состояния сетки через метод .save(). Это позволяет извлечь расположение всех виджетов и сохранить их в sessionStorage:

const grid = GridStack.init({
  column: 12,
  draggable: { handle: '.grid-stack-item-content' },
});

function saveGridState() {
  const gridData = grid.save(); // Получение массива объектов с позициями виджетов
  sessionStorage.setItem('gridState', JSON.stringify(gridData));
}

Здесь grid.save() возвращает массив объектов с ключами x, y, width, height и id для каждого виджета.

Восстановление состояния сетки

Чтобы восстановить расположение виджетов при загрузке страницы, необходимо извлечь данные из sessionStorage и передать их в метод .load():

function loadGridState() {
  const savedData = sessionStorage.getItem('gridState');
  if (savedData) {
    const gridData = JSON.parse(savedData);
    grid.removeAll(); // Очистка текущей сетки
    grid.load(gridData); // Загрузка сохраненного состояния
  }
}

// Вызов после инициализации сетки
loadGridState();

Использование grid.removeAll() гарантирует, что предыдущие элементы не будут мешать восстановлению состояния.

Автосохранение при изменениях

Gridstack.js предоставляет события для отслеживания изменений в сетке: change, added, removed. Использование события change позволяет автоматически сохранять состояние сетки при каждом перемещении или изменении размеров виджетов:

grid.on('change', function(event, items) {
  saveGridState();
});

Такой подход обеспечивает синхронизацию интерфейса с sessionStorage без необходимости вручную сохранять состояние.

Работа с динамическими виджетами

Для динамически создаваемых виджетов необходимо назначать уникальные идентификаторы, чтобы восстановление состояния работало корректно:

function addWidget(id, x, y, w, h) {
  grid.addWidget({
    id: id,
    x: x,
    y: y,
    width: w,
    height: h,
    content: `<div class="grid-stack-item-content">Виджет ${id}</div>`,
  });
  saveGridState();
}

При загрузке страницы эти идентификаторы используются для корректного восстановления виджетов из sessionStorage.

Управление версионированием состояния

В сложных интерфейсах рекомендуется хранить версию состояния для совместимости при обновлениях сетки:

const GRID_STATE_KEY = 'gridState_v1';

function saveGridState() {
  const gridData = {
    version: 1,
    items: grid.save(),
  };
  sessionStorage.setItem(GRID_STATE_KEY, JSON.stringify(gridData));
}

function loadGridState() {
  const savedData = sessionStorage.getItem(GRID_STATE_KEY);
  if (savedData) {
    const gridData = JSON.parse(savedData);
    if (gridData.version === 1) {
      grid.removeAll();
      grid.load(gridData.items);
    }
  }
}

Это позволяет изменять структуру сетки в будущих версиях приложения без риска потери данных.

Очистка sessionStorage при необходимости

Если требуется сбросить состояние сетки:

function resetGrid() {
  grid.removeAll();
  sessionStorage.removeItem('gridState');
}

Такой подход полезен при разработке панели администратора или тестировании интерфейсов.