HTML5 за 10 минут

Сохранение данных в браузере


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

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

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

<!DOCTYPE html>

<html>

<head>

<title>

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

</head>

<body>

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

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

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

<input type="button" valuer"Получить"

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

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<title>

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

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

{

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

}

</script>

</head>

<body>

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

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

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

<input type="button" value="Получить"

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

</body>

</html>

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

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

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