#javascript #html #local-storage
#javascript #HTML #локальное хранилище
Вопрос:
У меня есть сайт GitHub pages с изображением на нем. Я пытаюсь, чтобы веб-страница показывала предупреждение всякий раз, когда я нажимаю на изменение на веб-сайте.
До сих пор мой подход заключался в реализации функции автоматического обновления:
setTimeout(function(){ location.reload(); }, 60000);
Это будет автоматически обновляться каждую минуту, фиксируя все изменения, которые я делаю. Однако мне нужно показывать оповещение всякий раз, когда изменяется содержимое страницы. Важно иметь в виду, что содержимое не будет меняться при каждом обновлении — возможно, только каждые 10 минут (когда я нажимаю на изменения).
Я думаю, что способ сделать это — сохранить имя изображения, а затем посмотреть, меняется ли имя изображения при каждом обновлении — и если имя действительно изменилось, то показать оповещение. Я читал о чем-то под названием localStorage, но я не уверен, как подойти к сохранению имени файла — я вроде как новичок в JS / HTML.
Является ли использование localStorage наилучшим подходом к этой проблеме? Какие есть другие альтернативы / простые способы реализовать это на странице GitHub?
Заранее спасибо.
Ответ №1:
Если я четко понимаю, что вам нужно реализовать, я бы посоветовал вам прочитать о MutationObserver на JavaScript. Этот класс отслеживает все изменения, которые вносятся в привязанный элемент. Вот код и рабочая демонстрация:
<html>
<body>
<p>
Some content
</p>
</body>
<script>
// select the target node
var element = document.getElementsByTagName('p')[0];
// create an observer instance
var observer = new MutationObserver(function(mutations) {
alert("Some changes were made");
});
// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true
// pass in the target node, as well as the observer options
observer.observe(element, config);
setInterval(function () { // here you can make your changes programatically
element.innerHTML = "New content";
}, 2000)
</script>
</html>
Ответ №2:
Вы также можете использовать cookies, то есть сохранять в cookie последнюю «версию» чего бы то ни было — где «version» может быть строкой, числом и т.д.
Преимущество этого в том, что оно также отправляется на сервер, поэтому вы можете сгенерировать макет / код оповещения непосредственно на сервере.
Проверьте https://github.com/js-cookie/js-cookie для скрипта, упрощающего это.
Другой альтернативой является реализация на сервере скрипта, который отвечает, изменилось ли содержимое. Что-то вроде http://foo.bar/changed?lastVer=XXXX , которое может возвращать JSON, подобный {changed:true,message:'We have changed the change'} . Вы могли бы получить это через ie. jQuery.getJSON() или ванильный XMLHttpRequest , и если это так, покажите сообщение пользователю, а затем перезагрузите страницу. Но для этого потребовалось бы где-нибудь создать исполняемый серверный скрипт.
Третьим вариантом было бы загрузить страницу, скажем, в скрытый IFRAME, проверить, изменилось ли изображение или содержимое, и если да, перенести только изображение — или определенную часть содержимого — на главную страницу, не обновляя его. Или, может быть, обновить его. Идея состоит в том, чтобы загрузить страницу в IFRAME и определить там, изменилось ли что-то.