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

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

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);
}

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