Внести блок в localstorage

171
21 февраля 2019, 20:50

Есть блок:

<div class="new-design">
  <p>Перейти на <a href="">новый дизайн</a></p>
  <span class="close-new-design">x</span>
</div>

Логика такова, этот блок статично на странице, но его можно закрыть:

$(document).ready(function() {
  $(".close-new-design").on("click", function(){
    $(".new-design").addClass('active');
  });
});

При закрытии блока, нужно добавить его в localstorage на 1 час, чтобы после часа блок снова вылез на странице.

Answer 1

Проще всего решить эту задачу, используя куки, потому что у кук есть время жизни, и проверять нужно лишь то, существует кука или нет.

(чтобы этот код заработал, нужно нагуглить и скачать плагин jquery.cookie.js)

let cook = $.cookie('cookie_name'); // пытаемся получить куку
if(!cook) { // если куки нет
    $('.new-design').css('display', 'block'); // открываем блок
}
else { // а если кука ещё живая, оставляем блок скрытым
    $('.new-design').css('display', 'none');
}
$(".close-new-design").on("click", function(){ // по клику
    $(".new-design").addClass('active'); // скрываем блок
    $.cookie('cookie_name', 'cookie_value', { // ставим куку
        expires: 1/24 // на час
    });
});

Можно решить и с помощью localStorage, но потребуются дополнительные манипуляции с отсчётом времени, прошедшего с момента клика:

let storage = localStorage.getItem('my_storage'); // получаем значение из хранилища
let now = Math.round(new Date().getTime() / 1000); // получаем текущее время в timestamp
if(storage < now) { // если время в хранилище меньше, чем текущее
    $('.new-design').css('display', 'block'); // открываем блок
}
else { // если пока ещё больше (т.е. час не прошёл)
    $('.new-design').css('display', 'none'); // оставляем блок скрытым
}
$(".close-new-design").on("click", function(){ // по клику
    $(".new-design").addClass('active'); // скрываем блок
    localStorage.setItem('my_storage', Math.round(new Date().getTime() / 1000) + 3600); // записываем в хранилище значение, равное текущему времени + 1 час
});
READ ALSO
Вопрос по архитектуре приложения

Вопрос по архитектуре приложения

Пишу приложение, которое управляет некоторым устройством по com-портуИнформационный обмен осуществляется по принципу запрос-ответ, но устройство...

188
Юнит-тесты и Tuple

Юнит-тесты и Tuple

После того как прогоняю этот тест:

164
WPF: Создание универсального стиля для кнопки

WPF: Создание универсального стиля для кнопки

Есть много кнопок с одинаковым стилем, в которых изменяется только иконка и название и toolTipКак создать универсальный стиль для них?

257
Вернуть BITMAP из unmanaget dll

Вернуть BITMAP из unmanaget dll

Пробовал вернуть HBITMAP из unmanaged dll на c++, но его C# не хочет переваривать, описал его как возвращаемый IntPtr, пишет о невозможности преобразования...

161