Событие при каждом третьем посещении
Доброго времени суток, уважаемые форумчане.
Не понимаю как запустить событие при каждом третьем посещении страницы. Хочу использовать для этого LocalStorage и sessionStorage. Может кто подсказать, показать пример как этого добиться. |
localStorage и sessionStorage счётчик посещений
Alexodiy,
document.addEventListener("DOMContentLoaded", function() {
var num = localStorage.getItem("num") || 0,
today = sessionStorage.getItem("today");
if(today === "yes") return;
sessionStorage.setItem("today", "yes");
num = +num + 1;
localStorage.setItem("num", ""+num);
if(num % 3 === 0 ) alert("3");
});
|
Цитата:
|
Цитата:
<script>
document.addEventListener("DOMContentLoaded", function() {
var num = Number(localStorage.num) || 0;
if(sessionStorage.today === "yes") return;
sessionStorage.today = "yes";
localStorage.num = ++num;
if(num % 3 === 0) alert("3");
});
</script>
если вам надо при третьем обновлении страницы, то можно так... (нажмите три раза кнопку запустить)
<script>
document.addEventListener("DOMContentLoaded", function() {
var num = Number(localStorage.num) || 0;
localStorage.num = ++num;
if(num % 3 === 0) alert("3");
});
</script>
|
да работает, спасибо. а можно ли остановить выполнение например по клику по кнопке? это получается просто переменную num переписать?
Или объявить новый localStorageи на него завязать, если например кликнули по кнопке, то больше ничего не делаем, а если не нажимали прогнем выше написанное условие |
Вы имеете в виду, чтобы при нажатии на кнопку вообще больше не запускалось?
Вот пример с возможностью включения и отключения запуска... Если на кнопке стоит галочка, то оно запускается через три раза, если не стоит галочка, то не запускается
<script>
document.addEventListener("DOMContentLoaded", function() {
var checkbox = document.getElementById("toggle-launch");
checkbox.addEventListener("change", function() {
localStorage.launch = checkbox.checked;
if(!checkbox.checked) localStorage.num = 0;
});
if("launch" in localStorage) {
checkbox.checked = localStorage.launch === "true";
} else {
localStorage.launch = checkbox.checked;
}
if(!checkbox.checked) return;
var num = Number(localStorage.num) || 0;
localStorage.num = ++num;
if(num % 3 === 0) alert("3");
});
</script>
<label><input type="checkbox" id="toggle-launch" checked>Запускать</label>
<script></script>
|
Да именно, только по клику по линку, а не через инпут. Спасибо, я все пнял.
|
Цитата:
Также насчёт обмана и заблуждении, в которые вас ввели: на самом деле эти элементы могут быть стилизованы при помощи CSS! |
Malleys, так у меня и планируется переход на другой документ. Смысл такой, по событию падают уведомляшки с просьбой перейти на другую страницу, так вот если пользователь переходит, то эти уведомления я отрубаю.
|
Цитата:
$(".link").on("click", function(){
// тут запишем ключ и по нему потом проверяем вместо checkbox.checked
}
? |
Цитата:
А то, что вы предложили с ссылкой, я такого не понял... Для аналогии: допустил это был бы не переключатель Wi-Fi, а по вашему методу: ссылка. Вот, нажимает пользователь в телефоне ссылку Wi-Fi, и куда-то переходит, и как понять такой переключатель? |
Цитата:
Я написал вам в личку, с подробностями, так как мне не желательно светить тему публично |
Простите, что не сразу ответил! Да, то что вы описали в видео, лучше всего сделать при помощи ссылки, ведь она ведёт на страницу отзывов!
В таком случае, там совсем другая логика! Каждый третий раз ссылка, на которую ещё не нажимали, появляется. Если на неё нажать, происходит переход, а вместо ссылки появляется «Спасибо»! При следующих заходах вместо такой ссылки пишут, что вы уже оставляли отзыв! Данные получаются/сохраняются при помощи функции getData/saveData, которые получают/сохраняют данные в локальном хранилище, но вы можете, если хотите, переписать эти функции, чтобы данные получались/сохранялись удалённо (например на сервере) Сама ссылка всегда открывается в новой вкладке (если функционал предполагает, то почему бы не автоматизировать!) Каждая такая ссылка должна иметь в атрибуте id префикс (в данном случае rating-), после которого идёт уникальный номер (например, натуральные числа по порядку) Это позволяет однозначно обозначить ссылку на любой странице и сказать, посещали её или нет! Вот пример...
<script>
document.addEventListener("DOMContentLoaded", function() {
function getData() {
var data = "ratingData" in localStorage ?
JSON.parse(localStorage.ratingData) : { count: 1 };
return Promise.resolve(data);
}
function saveData(ratingData) {
localStorage.ratingData = JSON.stringify(ratingData);
return Promise.resolve("ok");
}
var PREFIX = "rating-";
var links = Array.from(
document.querySelectorAll("a[id^='" + PREFIX.replace(/'/g, "\\'") + "']")
);
var hasBeenRatedElement = document.createElement("span");
hasBeenRatedElement.innerHTML = "Вы уже оставляли отзыв!";
var thanksElement = document.createElement("span");
thanksElement.innerHTML = "Спасибо!";
getData().then(function(ratingData) {
links.forEach(function(link) {
var id = link.id.replace(PREFIX, "");
if(id in ratingData) {
link.parentNode.insertBefore(hasBeenRatedElement.cloneNode(true), link);
link.parentNode.removeChild(link);
} else {
if(ratingData.count !== 0) {
link.parentNode.removeChild(link);
return;
}
link.target = "_blank";
link.addEventListener("click", function() {
ratingData[id] = 1;
saveData(ratingData);
link.parentNode.insertBefore(thanksElement.cloneNode(true), link);
link.parentNode.removeChild(link);
});
}
});
ratingData.count = (ratingData.count + 1) % 3;
saveData(ratingData);
});
});
</script>
<p><a id="rating-1" href="https://google.com/">Оставить отзыв 1</a></p>
<p><a id="rating-2" href="https://ya.ru/">Оставить отзыв 2</a></p>
Такие ссылки могут храниться в таблице в базе данных, тогда вы можете легко ими управлять, также в других таблицах может быть ссылка на первичный ключ `id` и пр. Код:
+------+---------------------+О, да! Язык не называется YuhvuhScreapt, он называется JavaScript. Может вам поможет эта табличка с некоторыми словами web-разработки! http://malleys.lark.ru/english.html |
Цитата:
|
Цитата:
<p><a id="click'n'rate-1" href="https://google.com/">Оставить отзыв 1</a></p>и т. д. |
Цитата:
|
Цитата:
Префикс нужен, чтобы отличить от других ссылок, которые так не должны себя вести! Применяется при поиске элементов, при сохранении списка посещённых ссылок. |
Цитата:
и так на всякий случай ... вариант без replace.
<p><a id="click'n'rate-1" href="https://google.com/">Оставить отзыв 1</a></p>
<script>
var PREFIX = "click'n'rate-";
var el = document.querySelector('[id^="'+PREFIX+'"]');
alert(el);
</script>
|
Цитата:
|
Malleys,
Цитата:
|
рони, вообще-то это это вы раздули проблему из-за того, что я использовал символ в селекторе в качестве «обычного символа языка», чтобы не было никаких проблем, даже если префикс можно будет вводить, например, через текстовое поле!
Я думаю, эти упрёки были бы к месту, если бы я как раз таки не использовал бы экранирование! Уязвимость Экранирование символов |
Malleys,
я не могу вас понять. |
Malleys, огромнейшее спасибо. Как вы так быстро решаете такие вопросы, я тоже хочу так научится на JS. Говорят JS легкий язык, но мне почему то очень сложно на него адаптироватся после других
|
| Часовой пояс GMT +3, время: 03:23. |