[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Обмен данными между страницами на сайте
sergeiss
При создании "нормальных", то есть не одностраничных сайтов, возможно возникновение одной интересной ситуации. Изменили что-то на одной странице и эти изменения желательно тут же получить на других страницах, открытых у этого пользователя. Особенно актуально для интернет-магазинов.

Да, можно использовать аякс или веб-сокеты :) И многие из форумчан так бы и сделали. Но можно пойти по еще более современному пути и использовать localStorage/sessionStorage. У них, кроме собственно хранения данных, есть одна чрезвычайно полезная фича: событие 'storage', возникающее при изменении данных в хранилище. И вот это-то мы и можем, просто обязаны использовать для своих целей!

Итак, для теста делаем минимум 2 файла. В одном мы изменяем данные в хранилище, во втором (пусть он будет в другом каталоге) слушаем событие "изменение хранилища" и что-то делаем. Таких слушателей может быть много, во всех одновременно открытых страницах.

Тут делаем изменения
index.html
<!DOCTYPE html>
<html>
<head>
<title>
First page</title>
<script>
function
inform( val )
{
localStorage.setItem( 'val', val );
}
</script>
</head>
<body>
<input
type="text" value="20" onkeyup="inform(this.value)">
<br>
<iframe
src="internal/index.html"></iframe>
</body>
</html>


Тут ловим изменения (файл можно открыть как в айфреме на первой странице, так и одновременно в отдельном окне браузера).
internal/index.html
<!DOCTYPE html>
<html>
<head>
<title>
Second</title>

<script>

window.addEventListener( 'storage', onStorageChange );

function onStorageChange( event )
{
document.getElementById('val').value = localStorage.getItem( 'val' ) || '';
console.log( event );
}
</script>
</head>
<body>
<input
id="val">
<br>
<textarea
id="ta"></textarea>
</body>
</html>


В консоли видим нечто такое:

storage 
{
target: Window → index.html,
isTrusted: true,
key: "val",
oldValue: "20x",
newValue: "20xdf",
url: "http://jobs.local/test/storage/index.html",
storageArea: Storage,
currentTarget: Window → index.html,
eventPhase: 2,
bubbles: false,
cancelable: false
}


Что тут происходит, говорите? Я думаю, что все, кому это интересно, разберутся сами. А кто не разберется, тот просто "не дорос" до этого.

И для тех, кто по-аглицки понимает, пруф-линк: https://developer.mozilla.org/en-US/docs/We...Web_Storage_API

Проверил, мой код работает в 4-х браузерах (других у меня просто нет): Огнелис, Хром, Опера, Ослик.

Удачи всем в написании красивых и удобных веб-приложений :)

PS. Если надо, тему могу закрепить.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.