Nadia833 Ответов: 1

Передача данных с одной HTML-страницы на другую с помощью javascript


Привет,
Я пытаюсь передать данные с одной HTML-страницы, которая просит пользователя ввести свои данные, на другую HTML-страницу, которая отображает эти данные. Для этого я использую JavaScript.Все работает, но данные не появляются на второй HTML-странице.
Примечание: Я использую пользовательский интерфейс ONSEN.

Что я уже пробовал:

код JavaScript:
ВАР програмное=[""];
document. addEventListener("init", функция (событие) {
если (event.target.id = = " подробности") {
document.getElementById ("name"). value=allData[1];
document.getElementById ("мобильный"). value=allData[2];
document.getElementById ("date"). value=allData[3];
document.getElementById ("section"). value=allData[4];
document.getElementById ("issue"). value=allData[5];
}
}, ложный);



document.getElementById ("Sbtn"). onclick= function () {submitForm()};

функция submitForm()
{
//хранилище localStorage.понятно();

програмное=[""];
var a= document. getElementById ("имя"). value;
var b= document. getElementById ("мобильный"). value;
var c= document. getElementById ("дата"). value;
var d= document. getElementById ("section"). value;
var e= document. getElementById ("issue"). value;


програмное.толчок(а);
програмное.толчок(б);
програмное.подтолкнуть(с);
програмное.толчок(д);
програмное.нажать(е);


localStorage. setItem('AllData', allData);
параметры var = {
анимация: "слайд", / / какую анимацию использовать
onTransitionEnd: function () {} / / вызывается при завершении анимации перехода
};
myNav.pushPage("details.html" варианты);

предупреждение ("пожалуйста, проверьте свои данные");
оповещения(програмное);

}


--------------------------
Второй код HTML-страницы:

& lt;ons-page id= "details">
& lt;ons-панель инструментов>
< ons-back-кнопка & gt;Back

Подтверждение


& lt;форма>
< этикетка> название: < / этикетка>


& lt;этикетка> номер мобильного телефона: < / этикетка>


<label & gt;Дата: < / label>


&ЛТ;ярлык&ГТ;секция / часть: &ЛТ;/ярлык&ГТ;


<label & gt;Issue: < / label>
< / форма>
Привет, {{NAD | / 'незнакомец'}}!


Ваш номер мобильного телефона {{ mobile | / 'null' }}


Ваша проблема заключается в {{ issue | / 'null' }}










1 Ответов

Рейтинг:
9

Sergey Alexandrovich Kryukov

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

Этот универсальный API Web storage:
Веб-хранилище-Википедия, свободная энциклопедия[^],
Web Storage API-веб-API | MDN[^],
Window.sessionStorage-веб-API | MDN[^],
Окно.localStorage-веб-API | MDN[^].

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

Кроме того, вы можете разумно предпочесть сохранить все записи состояния только одним ключом и сохранить восстановить все сразу. Это была бы лучшая идея. Для этого вам нужно будет сериализовать и десериализовать все данные. Это можно легко сделать с помощью JSON: JSON-JavaScript | MDN[^].

Вы можете найти исчерпывающий пример всей этой техники в моей статье, в разделе веб-хранилище:
Калькулятор JavaScript, 7 динамическое переключение строгого режима и веб-хранилище[^]

Это все.

—СА