HTML5 за 10 минут

Размещение данных в предыстории


Пользователю можно также разрешить помещать текстовые данные в предыстории текущей страницы для последующего их восстановления. Для этой цели выполните следующие действия.

1.   Откройте HTML-документ из файла pophistory.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите выделенный ниже полужирным код для создания текстового поля и кнопки с меткой Поместить данные.

<!DOCTYPE html>

<html>

<head>

<title>

Предыстория просмотра веб-страниц </title>

<script type="text/javascript"> function back()

{

window.history.back();

}

</script>

</head>

<body onload="loader()и>

<Ь1>Предыстория просмотра веб-страниц</h1> cinput type="button" уа1ие="Назад" onclick-backO;

<input type="button" value="Вперед" onclick="forward();">

<br>

Число перемещаемых страниц: <input id="amount" type="text">

<input type="button" value="Перейти" onclick="go();">

<br>

<br>

<br>

Помещаемый текст: cinput id="statedata" type="text">

<input type="button" value="Поместить данные" onclick="pushdata();>

<br>

<div id="length"x/div>

<br>

<div id="state"x/div>

<br>

</body>

</html>

3.   Введите выделенный ниже полужирным код для сохранения введенного пользователем текста в объект и размещения этого объекта в предыстории текущей страницы. При возврате к этой странице сохраненный текст будет восстановлен.

<!DOCTYPE html>

<html>

<head>

<title>

Предыстория просмотра веб-страниц </title>

<script type="text/javascript"> function back()

{

window.history.back();

}

function pushData()

{

var statedata =

document.getElementById("statedata").value; var containerObject = {container: statedata}; history.pushState(containerObject, "item", "pophistory.html");

}

</script>

</head>

<body onload="loader()">

<Ь1>Предыстория просмотра веб-страниц</Ы>

<input type="button, value-Назад" onclick="back();">

<input type="button” value="Вперед" onclick="forward();">

<br>

Число перемещаемых страниц: <input id="amount" type="text">

<input type="button" value="Перейти" onclick="go();">

<br>

<br>

<br>

Помещаемый текст: <input id="statedata" type="text">

<input type="button" value="Поместить данные" onclick="pushdata();">

<br>

<div id="length"x/div>

<br>

<div id="state"x/div>

<br>

</body>

</html>

4.   Сохраните внесенные изменения в файле pophistory.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Если теперь пользователь введет данные в текстовом поле и щелкнет на кнопке Поместить данные, введенный им текст будет помещен в предысторию текущей страницы. В следующем задании вам предстоит извлечь текст, помещенный в предысторию браузера.

Комментарии закрыты