JavaScript. Подробное руководство, 6-е издание, стр. 344

 <button onclick="sync()">Синхронизировать</button>

<b>      &lt;button onclick=&quot;applicationCache.update()&quot;&gt;0бновить пpилoжeниe&lt;/button&gt;</b>

 </div>

 <textarea id="editor"></textarea>

 <div id="statusline"></div>

 </body>

</html>

Наконец, в примере 20.7 приводится сценарий на языке JavaScript, который обеспечивает работу веб-приложения PermaNote. Он определяет функцию

status()

для отображения сообщений в строке состояния, функцию

save()

- для сохранения текущей версии заметки на сервере и функцию

sync()

- для синхронизации серверной и локальной копии заметки. Функции

save()

sync()

используют приемы управления протоколом HTTP, описанные в главе 18. (Интересно отметить, что функция

save()

использует HTTP-метод «PUT» вместо более типичного для таких случаев метода «POST».)

Помимо этих трех основных функций в примере 20.7 определяются также обработчики событий. Чтобы обеспечить синхронизацию локальной и серверной копий заметки, приложению требуется довольно много обработчиков событий:

onload

Пытается загрузить заметку с сервера, если там хранится более новая ее версия, и по завершении синхронизации разрешает доступ к окну редактора. Функции

save()

sync()

выполняют HTTP-запросы и регистрируют обработчик события «onload» в объекте

XMLHttpRequest

, чтобы определить момент, когда выгрузка или загрузка будут завершены.

onbeforeunload

Сохраняет текущую версию заметки на сервере, если она еще не была выгружена.

oninput

Всякий раз, когда текст в элементе

<textarea>

изменяется, он сохраняется в объекте

localStorage

, и запускается таймер. Если пользователь не продолжит редактирование в течение 5 секунд, заметка будет выгружена на сервер.

onoffline

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

ononline

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

onupdateready

Если появилась новая версия приложения, выводится сообщение в строке состояния, сообщающее об этом пользователю.

onnoupdate

Если приложение не изменилось, сообщает пользователю, что он или она работает с текущей версией.

А теперь, после краткого обзора логики работы приложения PermaNote, в примере 20.7 приводится ее реализация.

Пример 20.7'. permanote.js

// Некоторые необходимые переменные

var editor, statusline, savebutton, idletimer;

// При первой загрузке приложения

window.onload = function() {

<b>  // Инициализировать локальное хранилище, если это первый запуск</b>

 if (localStorage.note == null) 

localStorage.note = "";

 if (localStorage.lastModified == null) localStorage.lastModified = 0;

 if (localStorage.lastSaved == null) localStorage.lastSaved = 0;

<b>  // Отыскать элементы, которые составляют пользовательский интерфейс редактора.</b>

 // Инициализировать глобальные переменные,

 editor = document.getElementById("editor");

 statusline = document.getElementById("statusline");

 savebutton = document.getElementById("savebutton");

 editor.value = localStorage.note; // Восстановить сохраненную заметку

 editor.disabled = true; // Но запретить редактирование до синхр.

 // При вводе нового текста в элемент textarea

 editor.addEventListener("input",

 function (e) {

<b>                            // Сохранить новую заметку в localStorage</b>

 localStorage.note = editor.value;

 localStorage.lastModified = Date.now();

<b>                            // Переустановить таймер ожидания</b>

 if (idletimer) clearTimeout(idletimer);

 idletimer = setTimeout(save, 5000);

 // Разрешить кнопку сохранения

 savebutton.disabled = false;

 },