Реализация хранения данных

Реализация хранения данных.

Поскольку обе системы, sessionStorage и localStorage, работают с одним и тем же интерфейсом, для тестирования примеров кода и экспериментов с API нам будет достаточно одного HTML-документа и простой формы.

Листинг 10.1. Шаблон для API хранения

<!DOCTYPE html>

<html lang="ru">

<head>

<title>API веб-хранилища</title>

<link rel="stylesheet" href="storage. css">

<script src="storage. js"></script>

</head>

<body>

<section id="formbox"> form name="form">

^Жлючевое ^0B0:<br><input type="text" name="keyword" id="keyword"></p>

<p>Значение:<br><textarea name="text" id="text"></textarea></p>

<p><input type="button" name="save" id="save" value="Сохранить"></p>

</form>

</section>

<section id="databox">

Информация недоступна </section>

</body>

</html>

Мы также создали простой набор стилей для оформления страницы, благодаря которым область формы будет визуально отделяться от поля для отображения данных.

Листинг 10.2. Стили для нашего шаблона

#formbox{ float: left; padding: 20px; border: 1px solid #999999;

}

#databox{ float: left; width: 400px; margin-left: 20px; padding: 20px; border: 1px solid #999999;

}

#keyword, #text{ width: 200px;

} #databox > div{ padding: 5px;

Border-bottom: 1px solid #999999;

}

Создайте HTML-файл с кодом из листинга 10.1 и CSS-файл с именем storage. css, содержащий стили из листинга 10.2. Также вам понадобится файл под названием storage. js для сохранения и тестирования примеров JavaScript-кода из следующих листингов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *