Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Не срабатывает сохранение стиля в cookie (https://javascript.ru/forum/css-html/82411-ne-srabatyvaet-sokhranenie-stilya-v-cookie.html)

Quark_ 02.05.2021 12:27
Не срабатывает сохранение стиля в cookie
 
Необходимо, чтобы по клику - стиль сохранился в 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 02.05.2021 14:05
Цитата:
Сообщение от Quark_
Необходимо, чтобы по клику - стиль сохранился в cookie
jQuery.cookie('.ppp') - читает, а не сохраняет.

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

Quark_ 02.05.2021 16:01
Цитата:
Сообщение от voraa (Сообщение 536109)
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';
}

рони 02.05.2021 16:10
Цитата:
Сообщение от Quark_
как добавить время действия, например 24 часа?
сохранить время, потом проверить и если разница с текущим больше суток, то совершить необходимые действия

Quark_ 02.05.2021 21:55
Цитата:
Сообщение от рони (Сообщение 536113)
сохранить время, потом проверить и если разница с текущим больше суток, то совершить необходимые действия
Провозился со скриптом, но не осилил :( 


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());
}

рони 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_ 05.05.2021 09:30
рони,
А как через консоль можно проверить, что по клику запустился таймер?
Вчера скрыл блок, через 24 часа зашел на сайт и он не появился (в стилях по-прежнему в display:none).

рони 05.05.2021 09:54
localStorage скрыть на сутки
 
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>


Часовой пояс GMT +3, время: 00:40.