HTML5 за 10 минут

Восстановление данных, сохраненных непосредственно в браузере


Для того чтобы восстановить данные непосредственно из браузера в примере HTML-документа localstorage.html, выполните следующие действия.

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

2.   Введите выделенный ниже полужирным код для связывания кнопки Получить с кодом функции localGet(), написанной на JavaScript.

<1DOCTYPE html>

<html>

<head>

<title>

Сохранение содержимого веб-страниц </title>

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

{

var data = document.getElementById("Data").value; localStorage.setItem("Data", data);

}

</script>

</head>

<body>

<Ы>Локальное сохранение данных в браузере</Ы>

Данные: <input id="Data" type="text">

<input type="button" value="Сохранить" onclick="localStore();">

<input type="button" value="Получить" onclick="localGet(); ">

<input type="button" value="Очистить"

</body>

</html>

3.   Введите выделенный ниже полужирным код для создания функции localGet(), выполняющей восстановление данных, введенных пользователем и сохраненных непосредственно в браузере.

<!DOCTYPE html>

<html>

<head>

<title>

Сохранение содержимого веб-страниц </title>

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

{

var data = document.getElementById("Data").value; localStorage.setItem("Data", data);

}

function localGet()

{

document.getElementById("Data”).value = localStorage.getItem("Data”);

}

</script>

</head>

<body>

<hl>Локальное сохранение данных в браузере</Ы>

Данные: <input id="Data" type="text">

<input type="button" value="Сохранить" onclick="localStore();">

<input type="button" value="Получить" onclick="localGet();">

<input type="button" value="Очистить"

</body>

</html>

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

Таким образом, данные, сохраненные непосредственно в браузере, восстанавливаются в текстовом поле.

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