Форум

Quark_ · #1 (**permalink**) 02.05.2021, 12:27

Необходимо, чтобы по клику - стиль сохранился в cookie и между переходами по сайту блок не появлялся.
Что я делаю не так?

jQuery(document).ready(function(){
jQuery('.ppp .close').click(function(){
jQuery.cookie('.ppp').css("display", "none");
});
});

Ниже добавил jquery.cookie.js

jQuery.cookie=function(b,j,m){if(typeof j!="undefined"){m=m||{};if(j===null){j="";m.expires=-1}var e="";if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){var f;if(typeof m.expires=="number"){f=new Date();f.setTime(f.getTime()+(m.expires*24*60*60*1000))}else{f=m.expires}e="; expires="+f.toUTCString()}var l=m.path?"; path="+(m.path):"";var g=m.domain?"; domain="+(m.domain):"";var a=m.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}else{var d=null;if(document.cookie&&document.cookie!=""){var k=document.cookie.split(";");for(var h=0;h<k.length;h++){var c=jQuery.trim(k[h]);if(c.substring(0,b.length+1)==(b+"=")){d=decodeURIComponent(c.substring(b.length+1));break}}}return d}};

Но пишет ошибку: Uncaught TypeError: Cannot read property 'css' of null

voraa · #2 (**permalink**) 02.05.2021, 14:05

Сообщение от Quark_

Необходимо, чтобы по клику - стиль сохранился в cookie

jQuery.cookie('.ppp') - читает, а не сохраняет.

Если не требуется передавать информацию на сервер, то лучше использовать localStorage, а не cookies.

Quark_ · #3 (**permalink**) 02.05.2021, 16:01

Сообщение от voraa

jQuery.cookie('.ppp') - читает, а не сохраняет.

Если не требуется передавать информацию на сервер, то лучше использовать localStorage, а не cookies.

Вроде получилось, но не знаю, как добавить время действия, например 24 часа?

Код:

<div id="ppp">
<div id="ppp_close" onclick="onclickPC()">X</div>
</div>

var idPC = document.getElementById('ppp_close');
var idPB = document.getElementById('ppp');

function onclickPC() {
  idPB.style.display = (idPB.style.display == 'block') ? '' : 'none';
  localStorage.setItem('hide', idPB.style.display);
}

if(localStorage.getItem('hide') == 'none') {
  document.getElementById('ppp').style.display = 'none';
}

рони · #4 (**permalink**) 02.05.2021, 16:10

Сообщение от Quark_

как добавить время действия, например 24 часа?

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

Quark_ · #5 (**permalink**) 02.05.2021, 21:55

Сообщение от рони

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

Провозился со скриптом, но не осилил

var limit = 24 * 3600 * 1000; // 24 часа
var localStorageInitTime = localStorage.getItem('localStorageInitTime');

var idPC = document.getElementById('ppp_close');
var idPB = document.getElementById('ppp');

function onclickPC() {
  idPB.style.display = (idPB.style.display == 'block') ? '' : 'none';
  localStorage.setItem('hide', idPB.style.display);
}

if (localStorageInitTime === null) {

if(localStorage.getItem('hide') == 'none') {
  document.getElementById('ppp').style.display = 'none';
}

localStorage.setItem('localStorageInitTime', +new Date());
	
} else if(+new Date() - localStorageInitTime > limit) {

    localStorage.clear();
    localStorage.setItem('localStorageInitTime', +new Date());
}

рони · #6 (**permalink**) 02.05.2021, 22:22

Quark_,

var limit = 24 * 3600 * 1000; // 24 часа
var localStorageInitTime = localStorage.getItem('localStorageInitTime') || new Date();
var delta = new Date() - localStorageInitTime;
if(delta > limit) localStorage.removeItem('hide');
var idPC = document.getElementById('ppp_close');
var idPB = document.getElementById('ppp');

if(localStorage.getItem('hide') == 'none') {
    idPB.style.display = 'none';
}

function onclickPC() {
    idPB.style.display = 'none';
    localStorage.setItem('hide', 'none');
    localStorage.setItem('localStorageInitTime', +new Date());
}

Quark_ · #7 (**permalink**) 05.05.2021, 09:30

рони,
А как через консоль можно проверить, что по клику запустился таймер?
Вчера скрыл блок, через 24 часа зашел на сайт и он не появился (в стилях по-прежнему в display:none).

рони · #8 (**permalink**) 05.05.2021, 09:54

Quark_,
для примера 5 сек, успейте перезагрузить после клика.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #ppp {
            display: none;
        }
        #ppp.open {
            display: block;
        }
    </style>
</head>
<body>
    <div id="ppp">
        ppp
        <button type="button" id="ppp_close">ppp_close</button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var limit = 5000; //24 * 3600 * 1000; // 24 часа
            var localStorageInitTime = localStorage.getItem('localStorageInitTime') || new Date() - limit;
            var delta = new Date() - localStorageInitTime;
            console.log(delta >= limit)//true - время вышло
            var idPC = document.getElementById('ppp_close');
            var idPB = document.getElementById('ppp');
            if (delta >= limit) {
                idPB.classList.add('open');
            }
            function onclickPC() {
                idPB.classList.remove('open');
                localStorage.setItem('localStorageInitTime', +new Date());
            }
            idPC.addEventListener('click', onclickPC)
        });
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript