HTML5 за 10 минут

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


Разработчики HTML-документов уже давно испытывали потребность в средствах, позволяющих сохранять данные в промежутках между последовательными доступами к вебстраницам. Так, при повторном открытии веб-страницы со стандартным сценарием JavaScript устанавливались исходные значения всех переменных в его коде. Как же сохранить данные с веб-страницы, чтобы восстановить их, когда пользователь возвратится к этой странице?

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

Используя простой код JavaScript и HTML5, можно сохранять данные с текущей страницы, чтобы восстановить их даже после ее перезагрузки. Эти данные могут быть сохранены глобально в текущем веб-сеансе, организуемом между браузером и веб-сер- вером (в этом случае хранящиеся на сервере данные, как правило, удаляются, если по истечении 15 минут пользователь не предпринимал никаких действий), либо локально в самом браузере. В этой главе будут рассмотрены оба способа сохранения данных с текущей веб-страницы.

Общее представление о сохранении данных в текущем веб-сеансе

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

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

В данном примере пользователь может ввести некоторую информацию в текстовом поле, а затем щелкнуть на кнопке Сохранить, чтобы сохранить эту информацию в текущем веб-сеансе. После этого пользователь может стереть информацию, введенную в текстовом поле, нажав кнопку Очистить.

Если же пользователь выберет кнопку Получить, то данные, сохраненные в текущем веб-сеансе, будут восстановлены в текстовом поле.

Иными словами, в примере HTML-документа sessionstorage. html демонстрируется механизм сохранения и восстановления данных в текущем веб-сеансе только языковыми средствами JavaScript.

Однако для применения этого примера на практике браузер должен установить сеанс связи с веб-сервером. А это означает, что HTML-документ sessionstorage.html придется сначала выгрузить на веб-сервер, а затем открыть в браузере. Его нельзя просто открыть с жесткого диска своего компьютера, чтобы воспользоваться данным примером на практике.

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