Хранение компонентов Svelte — загрузка состояния в — из параметров хэша URL

Если у нас есть Сingle пage Аpplication, созданный с помощью Стройный, с кучей компонентов и хранилищем, в котором мы сохраняем текущее состояние приложения, есть ли рекомендуемый способ сохранить изменения состояния хранилища в # хеш-часть текущего URL и иметь возможность повторно загрузить то же состояние? из полного URL?

Это можно сделать вручную, проанализировав текущий URL-адрес с помощью location.search().

Сохранение параметров можно выполнить с помощью location.search("key", "value").

Некоторые вопросы:

  • Когда загружать состояние из URL? Какой будет запись инициализации приложения точка?
  • Когда сохранять состояние из магазина в URL? Есть ли общий способ сделать это?

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.


4
1 568
1

Ответ:

Решено

Редактировать:

svelte-spa-маршрутизатор, кажется, предлагает поддержку строки запроса из коробки.


В итоге я использовал URLSearchParams и полифилл для написания функций, которые сериализуют и десериализуют объект конфигурации, который хранится в хранилище:

import 'url-search-params-polyfill';

export function deserializeConfig(serializedConfig, resultConfig) {
  let hashParams = new URLSearchParams(serializedConfig);
  for (const hashParameterAndValue of hashParams.entries()) {
    const key = hashParameterAndValue[0];
    const value = hashParameterAndValue[1];

    const decodedKey = decodeUrlParameterKey(key);
    const decodedValue = decodeUrlParameterValue(value);

    resultConfig[decodedKey] = decodedValue;
  }


export function serializeConfig(config) {
  const hashParams = new URLSearchParams("");

  for (const key in config) {
    const value = config[key];
    const encodedValue = encodeParameterValue(value);
    const encodedKey = encodeParameterKey(key);;
    hashParams.set(encodedKey, encodedValue);
  }

  const serializedConfig = hashParams.toString();
  return serializedConfig;
}

Чтобы использовать его для сериализации/десериализации состояния из хэша URL:

в main.js:

import { configFromStore } from "./stores.js";

let config = {};

// when config from store changes
configFromStore.subscribe(updatedConfig => {
    config = updatedConfig;

   // check if the config was really modified and does not match the default
   if (!isEquivalent(updatedConfig, defaultConfig)) {
     // update URL hash after store value has been changed
     const serializedConfig = serializeConfig(updatedConfig);
     window.location.hash = "#" + serializedConfig;
   }
}

// on main app start, parse state from URL hash
const hash = window.location.hash;
if (hash && hash.length > 1) {
    const serializedConfig = hash.substr(1);
    deserializeConfig(serializedConfig, config);
    configFromStore.set(config);
}

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