Какой простой способ для старшеклассника обрабатывать постоянное состояние в простом приложении HTML / JS? - PullRequest
Новая
       40

Какой простой способ для старшеклассника обрабатывать постоянное состояние в простом приложении HTML / JS?

0 голосов
/ 04 февраля 2019

Я преподаватель компьютерных наук, с большим опытом преподавания Python и Java, но без большого опыта работы в сети.Сейчас я работаю со старшеклассником, которому поручили проект, который он хотел бы реализовать в HTML и JS.Так что это хороший шанс для меня узнать больше об этом типе приложения.

Это приложение для приема заказов на еду в Интернете и показа иллюстрации вашего заказа.Вы выбираете основное блюдо и любые пользовательские изменения.Затем вы выбираете другой курс еды, может быть, салат и любые изменения.И так далее.На первой странице, которую он показывает, вы увидите пустую тарелку.Вы выбираете курс для настройки, и он переходит на страницу, на которой отображаются параметры, затем на другую страницу с дополнительными параметрами и т. Д.Каждый раз, когда вы закончите настройку параметра, он будет возвращать вас на начальную страницу и показывать изображение блюда на тарелке (которое раньше было пустым).

Основная часть, с которой я не знаком, - это обработка постоянного состояния.Хотя каждая страница будет иметь уникальную структуру изображений (возможно, холста) и кнопок, она должна будет помнить порядок, настроенный при загрузке каждой страницы.

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

Возможно, sessionStorage - лучшая ставка?

Что касается возможного дублирования Постоянные переменные между загрузками страниц , мои потребности намного сложнее, чем этот вопрос - мне нужнохранить больше, чем одну глобальную переменную, и мне может понадобиться среда, чтобы упростить это.В частности, я заинтересован в том, чтобы сделать такой способ, который достаточно прост для понимания учащимся старших классов, чтобы он мог реализовать некоторые из них сам (по крайней мере, некоторые из них должны быть его собственной работой).Я не знаю, упростит ли использование фреймворка работу (это было бы хорошо), или потребуется больше усилий для понимания фреймворка (особенно относительно неопытного студента - не очень хорошо).

1 Ответ

0 голосов
/ 04 февраля 2019

Возможно, sessionStorage - лучшая ставка?

Если вы хотите, чтобы состояние автоматически истекло после завершения сеанса браузера.В противном случае используйте localStorage, который будет сохраняться дольше этого.

Важно помнить, что в веб-хранилище (как sessionStorage, так и localStorage) хранятся только строки , поэтому обычноТехника состоит в том, чтобы использовать его для хранения JSON, который вы анализируете при загрузке, чтобы вы могли иметь сложное состояние.Например: 

// On load
var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {
    // None was stored, create some
    state = {/*...default state...*/};
}

// On save
localStorage.setItem("state-key", JSON.stringify(state));

Обратите внимание, что этот бит: 

var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {

основан на том факте, что getItem возвращает null, если с этим ключом нет сохраненных данных, и JSON.parse Приводит свой аргумент к строке.null приводит к "null", который будет проанализирован обратно в null.: -)

Другой способ сделать это - использовать ||: 

var state = JSON.parse(localStorage.getItem("state-key")) || {
    // default state here
};
...