J'ai écrit une fonction qui change le logo en version minimisée lorsque je clique sur un bouton en changeant l'attribut d'une image. De plus, après un autre clic sur le même bouton, le logo revient à l'original.

Tout est comme je m'y attendais mais j'ai un problème lorsque je rafraîchis la page. Lorsque je rafraîchis la page, le navigateur rétablit simplement le logo sur l'original. Donc, je veux que le navigateur se souvienne si le logo est changé et se souvient de cet état après le rechargement de la page. Veuillez voir mon code ci-dessous. J'ai vu des solutions similaires ici mais je ne sais pas comment l'implémenter dans mon code.

Comment puis-je définir et utiliser des cookies pour cela?

$('#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");
    }
});
-1
Sixth Wiz 11 avril 2018 à 13:30

4 réponses

Meilleure réponse

Localstorage est une meilleure option pour cela:

$(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);
});
0
Sunny Soni 11 avril 2018 à 10:43

Vous pouvez définir des cookies à l'aide de l'api javascript: https://www.w3schools.com/js/js_cookies. asp

Ou utilisez une API plus simple comme celle-ci: https://github.com/js-cookie/js-cookie

Ainsi, dans if/else, vous pouvez enregistrer le lien actuellement utilisé du logo vers un cookie:

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

Vous pouvez également utiliser le stockage local (https://www.w3schools.com/html/html5_webstorage.asp) mais il n'est pas garanti que cela fonctionnera sur les navigateurs plus anciens.

0
Marinos An 11 avril 2018 à 10:36
$(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')); 
    });

});

Définissez src dans localStorage et au chargement de la page, obtenez la valeur et redéfinissez src sur logo.

0
Smit Raval 11 avril 2018 à 10:34

Si vous souhaitez utiliser des cookies, vous pouvez utiliser le plugin JQuery http://plugins.jquery.com/cookie/

Alors :

$(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'));
    });
});
0
Sébastien S. 11 avril 2018 à 10:41