Как сохранить текущую сессию html с помощю js?

Question

Возникла проблема. Я делаю приложение quiz builder app. Есть главная страница. Есть страница для создания квизов. Пользователь может создавать собственный квиз, заполняя поля, а потом отображать его у себя на экране. Есть кнопка save. Я бы хотел что бы при нажатии кнопки save, квиз, который создал пользователь, сохранялся. Затем на главной странице создавалась ссылка на этот квиз. С текущими данными и скриптами. Я новичок в веб разработке, поэтому с такой проблемой еще не сталкивался. Кто понял, о чем я говорю, подскажите что можно сделать. Я прочитал про local storage, но не смог никак применить в своем проекте.

Answer 1

Если вы хотите сделать это только на фронте, то это будет динамический роутинг средствами js, такими как например vue-router. Так же вам будет необходимо сохранять состояние заполненных полей в localStorage. То есть предположим у нас есть управление роутингом с клиента, вы нажатию кнопки save делаете следующее (мы просто сохраняем заполненную форму с ключом роутинга):

const onSave => (guid, form) => window.localStorage.setItem(guid, JSON.stringify(form));

Аргумент guid, это генерируемое значение, например следующей функцией:

const genGUID = () => {
  const s4 = () => Math
    .floor((1 + Math.random()) * 0x10000)
    .toString(16)
    .substring(1);

  return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4();
};

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

const onRouteParamChange = (guid) => JSON.parse(window.localStorage.getItem(guid) || '{}');

Но такой подход не то чтобы хорошая идея, потому что лучше такие данные сохранять в базу данных и затем получать эти данные при помощи сетевых запросов, в случае с SPA такой подход называется REST. Реализация простого круда выходит за рамки ответа на вопрос.

БЛОГ НА HUSL

Как сохранить текущую сессию html с помощю js?

Ответы (1 шт):