Задать вопрос
@m1kz
javascript

Как постоянно обновлять информацию, не перезагружая страницу?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Счетчик просмотров</title>
	
    <script>
           // Изначально я добавил  localStorage.setItem('number', '0'), после чего удалил
            function myFunction() {
                var x = Number(localStorage.getItem('numbers'))+1
                localStorage.setItem('numbers', x.toString())
                document.getElementById("p1").innerHTML="Эту страницу просмотрели " + x + " раз";
            }
    </script>

</head>
<body onload=myFunction()>
        <p  id="p1"></p>
</body>
</html>


При заходе на страницу счетчик меняется, но как его обновить не перезагрузив страницу?
  • Вопрос задан
  • 735 просмотров
4 комментария
Подписаться 2 Простой 4 комментария
Решения вопроса 3
origami1024
@origami1024
went out for a night walk
Нужна связь с сервером, есть куча вариантов, например:
1) через вебсокеты,
2) постоянные ажаксы для проверки изменений счетчика - самый простой вариант
3) менее постоянные ажаксы по принципу longpool
4) PWA с сервис воркерами, что кажется работает с сокетами.
.
.
.
P. S. Хотя может ОП просто ищет ивент происходящий во всех вкаладках на изменении данных в локалсторедже: https://developer.mozilla.org/en-US/docs/Web/API/W... т. е. вместо
onload=myFunction()
что-то типа:
<script>
  window.addEventListener('storage', myFunction);
</script>

с учетом того, что myFunction будет вставлять в нужный DOM-элемент значение из локалстореджа
Ответ написан
Комментировать
Комментировать
wapster92
@wapster92 Куратор тега JavaScript
setInterval( myFunction, время обновления в мс)
Эту страницу просмотрели
браузер не видит кто ее еще смотрел, будет считать лишь свои просмотры, для общей статистики нужен бэкенд (для справки)
Ответ написан
Комментировать
Комментировать
@jenya92
Страница сама по себе не знает, сколько раз её просматривали другие пользователи. Переменную со значением нужно хранить на сервере, а страница должна получать эти данные. К примеру браузер может обновлять эти данные следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Счетчик просмотров</title>
  
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Сайт стартовал!');
    let TimeStep = 1000, // Обновляем данные раз в секунду
    url = '/get.php'; // Адрес, где хранится значение счётчика
    
    function Update(){
        console.log('Отправляем запрос...');
        let R = new XMLHttpRequest();
		
		R.open('POST', url, true);
		R.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		R.send();
		R.onreadystatechange = function(){
			if(R.readyState == 4){
				switch (R.status) {
					case 200:
                        let Re = JSON.parse(R.responseText);
                        document.getElementById('p1').innerHTML = 'Просмотров: '+Re.get;
                        console.log(Re);
						break;
					case 404:
						console.log('Адрес запроса не верен');
						break;
					default:
                        console.log('неизвестная ошибка');
				}
			}
        }
        
        setTimeout(Update, TimeStep);
    }

    Update();
});
</script>

</head>
<body>
        <p  id="p1"></p>
</body>
</html>


Как реализовать хранение переменной на сервере - вариантов куча, можно в базе, можно в файле. Для примера, как может быть реализована отправка счётчика:

<?php

// Получаем из Бд значение, сколько просмотров страницы было
$AllGet = 5;
// К примеру получили занчение, что было пять просмотров

echo json_encode(array('Err'=>false,'get'=>$AllGet));
// Отправили это значение на страницу

?>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Программа (скрипт) для автоматизации торговли Solana
25 апр. 2024, в 00:45
100 руб./в час
Телеграм-Бот для выдачи конфигов VPN (VLESS/Reality)
25 апр. 2024, в 00:32
10000 руб./за проект
Ещё заказы