HTML5 за 10 минут

Представление о прикладном программном интерфейсе локального сохранения данных


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

Механизм локального сохранения данных основывается на применении объекта JavaScript, называемого localSession. Подробнее об этом объекте можно узнать, обратившись по адресу http://dev.w3.org/html5/webstorage/. А ниже дается самое общее

представление об этом объекте и связанных с ним программных средствах.

Объект: localSession Атрибуты: length Функции:

♦    кеу()

♦    getltem()

♦    setltemf)

♦    removeltemf)

♦    clear()

Поддерживающие браузеры: Firefox, Safari и Chrome

Аналогично рассматривавшемуся ранее в этой главе объекту sessionStorage, данные могут сохраняться в объекте localSession с помощью пар “ключ-значение”. Это означает, что при сохранении данных указывает не только их значение, но и ключ, предоставляющий доступ к ним. Этот ключ указывается впоследствии, когда сохраненные данные читаются.

Атрибуты и функции объекта localSession точно такие же, как и у объекта sessionStorage. Поэтому с их синтаксисом, назначением и применением вы можете ознакомиться, обратившись в разделу “Представление о прикладном программном интерфейсе сохранения данных в текущем веб-сеансе” ранее в этой главе.

Пример локального сохранения и восстановления данных

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

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

2.   Введите приведенный ниже код основного тела HTML-доку- мента.

<!DOCTYPE html>

<html>

<head>

<title>

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

</head>

<body>

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

</body>

</html>

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

<1DOCTYPE html>

<html>

<head>

<title>

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

</head>

<body>

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

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

<input type="button" value="Сохранить"

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

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

</body>

</html>

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

Итак, HTML-документ localstorage.html создан, а теперь нужно организовать в нем локальное сохранение данных непосредственно в браузере.

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