Jquery, .attr - запомнить состояние с помощью файлов cookie после перезагрузки страницы

Я написал функцию, которая меняет логотип на его свернутую версию, когда я нажимаю кнопку, изменяя атрибут изображения. Кроме того, после еще одного щелчка по той же кнопке логотип вернется к исходному состоянию.

Все как я ожидал, но при обновлении страницы возникают проблемы. Когда я обновляю страницу, браузер просто переключает логотип обратно на исходный. Итак, я хочу, чтобы браузер запомнил, переключился ли логотип, и запомнил это состояние после перезагрузки страницы. Пожалуйста, посмотрите мой код ниже. Я видел здесь похожие решения, но не знаю, как реализовать их в своем коде.

Как я могу установить и использовать файлы cookie для этого?

$('#changeLogo').click(function() {
    if ($(".logo").attr('src') === "files/img/logo-min.png") {
        $(".logo").attr('src', "files/img/logo.png");
    }
    else {
        $(".logo").attr('src', "files/img/logo-min.png");
    }
});

почему бы вместо этого не использовать локальное хранилище?

31piy 11.04.2018 12:30

Вы хотите сказать, что искали в Google, как использовать файлы cookie, и ничего не нашли?

Chris G 11.04.2018 12:34

Я провел свое исследование, но не смог найти способ получить правильный результат. В сети нет ни одного примера запоминания состояния после использования метода .attr (). Я знаю, что это не так уж сложно, но я новичок в этом.

Sixth Wiz 12.04.2018 07:50
0
3
278
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

$(document).ready(function(){

   var logo = localStorage.getItem('logo');
   if(logo != null){
    $(".logo").attr('src', logo);
   }
   $('#changeLogo').click(function() {
        if ($(".logo").attr('src') === "files/img/logo-min.png") {
            $(".logo").attr('src', "files/img/logo.png");
        }
        else {
            $(".logo").attr('src', "files/img/logo-min.png");
        }
        localStorage.setItem('logo',$(".logo").attr('src')); 
    });

});

Установите src в localStorage и при загрузке страницы получите значение и снова установите src на logo.

Если вы хотите использовать файлы cookie, вы можете использовать плагин JQuery http://plugins.jquery.com/cookie/

Потом :

$(document).ready(function(){

    if (typeof $.cookie('logo') === 'undefined')
        $.cookie('logo', "files/img/logo-min.png");

    $('#changeLogo').click(function() {
        if ($.cookie('logo') === "files/img/logo-min.png") {
            $.cookie('logo', "files/img/logo.png");
        } else {
            $.cookie('logo', "files/img/logo-min.png");
        }
        $(".logo").attr('src', $.cookie('logo'));
    });
});

Вы можете установить файлы cookie с помощью javascript api: https://www.w3schools.com/js/js_cookies.asp

Или используйте более простой API, например: https://github.com/js-cookie/js-cookie

Таким образом, в if/else вы можете сохранить используемую в данный момент ссылку логотипа в файл cookie:

//set
Cookies.set('logo-path', 'files/img/logo-min.png');
//get
Cookies.get('logo-path');

Вы также можете использовать локальное хранилище (https://www.w3schools.com/html/html5_webstorage.asp), но не гарантируется, что оно будет работать в старых браузерах.

Ответ принят как подходящий

Localstorage - лучший вариант для этого:

$(function(){
    $('#changeLogo').click(function() {
        var logoSrc;
        if ($(".logo").attr('src') === "files/img/logo-min.png") {
            logoSrc = "files/img/logo.png";
        }
        else {
            logoSrc = "files/img/logo-min.png";
        }

        $(".logo").attr('src', logoSrc);
        localStorage.setItem("logoSrc", logoSrc);
    });


    if ( typeof localStorage.logoSrc !== "undefined" )
        $(".logo").attr('src', localStorage.logoSrc);
});

Отлично! Спасибо тебе большое за это. Это идеально.

Sixth Wiz 11.04.2018 17:16

@SixthWiz Добро пожаловать в сообщество, вы можете принять ответ, который полностью решит вашу проблему.

Sunny Soni 11.04.2018 19:13

Другие вопросы по теме