Question

我编写了一个函数，当我通过更改图像的属性单击按钮时，将徽标更改为最小化版本。此外，再次单击相同的按钮后，徽标将切换回原始状态。

一切都如我所料，但刷新页面时遇到问题。刷新页面时，浏览器只需将徽标切换回原始徽标即可。所以，我希望浏览器记住徽标是否已切换，并在重新加载页面后记住该状态。请参阅下面的代码。我在这里看到过类似的解决方案，但我不知道如何在我的代码中实现它。

如何为此设置和使用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");
    }
});

Answer 1

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

});

在localStorage中设置src并在页面加载时获取值并再次将src设置为徽标。

Answer 2

如果您想使用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'));
    });
});

Answer 3

您可以使用javascript api：https://www.w3schools.com/js/js_cookies.asp

设置Cookie

或者像这样使用更简单的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），但不保证它可以在旧浏览器上使用。

Answer 4

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

JQuery，.attr - 在页面重新加载后记住使用cookie的状态

4 个答案: