Поскольку обе системы, 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-кода из следующих листингов.
Добавить комментарий