Если у нас есть Сingle пage Аpplication, созданный с помощью Стройный, с кучей компонентов и хранилищем, в котором мы сохраняем текущее состояние приложения, есть ли рекомендуемый способ сохранить изменения состояния хранилища в # хеш-часть текущего URL и иметь возможность повторно загрузить то же состояние? из полного URL?
Это можно сделать вручную, проанализировав текущий URL-адрес с помощью location.search()
.
Сохранение параметров можно выполнить с помощью location.search("key", "value")
.
Некоторые вопросы:
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.
Редактировать:
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);
}
Это немного сложнее, поскольку вам нужно позаботиться о конфигурации по умолчанию и удалить значения из сериализованной конфигурации, которые совпадают со значением по умолчанию. Также подписка сначала вызывается при загрузке конфигурации, хотя в этот момент конфигурация еще не изменена.