jQuery: 如何将选择保存到 cookie 中？

Question

我创建了一个横幅更改器，允许用户根据需要更改横幅，但我希望 selection 保存在 cookie 中。我想创建自己的代码。您可以在此处大致了解代码的作用：http://thoughtscenter.com/test/

目前，如果我在横幅选择器打开时 select 图片，一切正常，但是当我刷新页面时，图片消失了，我必须再次 select 以放置图片: http://prntscr.com/7mkzi2 after I refresh the page: http://prntscr.com/7mkzn4

我的 HTML 代码（横幅更改者）：

           <div id="banner-picker">
                <ul>
                    <li>
                        <span id="banner-1" style="background-image: url('banner-1.jpg');"></span>
                    </li>
                    <li>
                        <span id="banner-2" style="background-image: url('banner-2.jpg');"></span>
                    </li>
                    <li>
                        <span id="banner-3" style="background-image: url('banner-3.jpg');"></span>
                    </li>
                    <li>
                        <span id="banner-4" style="background-image: url('banner-4.jpg');"></span>
                    </li>
                </ul>
            </div>

JavaScript旗帜更换者代码：

$(function()
{
    $("#banner-picker-toggle-button").click(function(e)
    {
        $("#banner-picker").slideToggle();
    });
    $("#banner-picker span").click(function(e)
    {
       var banner_id = $(this).attr("id");
       $("#header").removeClass().addClass(banner_id);
    });
});

CSS:

    #banner-picker
    {
        border-bottom: 1px solid #CCCCCC;
        display: none;
        overflow: hidden;
        margin: 0 -20px 20px -20px;
        padding: 0 20px 20px 20px;
    }

    #banner-picker li
    {
        float: left;
        width: 25%;
    }

    #banner-picker span
    {
        height: 130px;
        display: block;
        margin-right: 20px;
        border-radius: 3px;
        box-shadow: inset 0px 1px 10px;
    }

    #banner-picker li:last-child span
    {
        margin-right: 0;
    }

#header.banner-1
{
    background-image: url("banner-1.jpg");
}

#header.banner-2
{
    background-image: url("banner-2.jpg");
}

#header.banner-3
{
    background-image: url("banner-3.jpg");
}

#header.banner-4
{
    background-image: url("banner-4.jpg");
}

想法是保存用户通过 cookie select编辑的内容，以便在下次访问或刷新页面时，横幅保持不变。

Answer 1

在这段代码中看到你可以这样使用。

$(function()
{
          var bannervalue= localStorage.getItem('banner'); // get banner id from storage
          if(bannervalue==null)
          {
          }
          else
          {
            $("#header").removeClass().addClass(bannervalue);
          }



    $("#banner-picker-toggle-button").click(function(e)
    {
        $("#banner-picker").slideToggle();
    });
    $("#banner-picker span").click(function(e)
    {
       var banner_id = $(this).attr("id");
       $("#header").removeClass().addClass(banner_id);
       localStorage.setItem('banner', banner_id ); // set banner id from storage
    });
});

Answer 2

您可以尝试使用 jQuery cookies 插件，因为 localStorage 在 ie9 或更低版本中无法工作:-

添加这个js文件<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>

并更改您的代码：-

 $("#banner-picker span").click(function(e)
 {
   var banner_id = $(this).attr("id");
   $.cookie('banner',banner_id);
   $("#header").removeClass().addClass(banner_id);
});

并添加此代码：-

$(function(){
 if(typeof $.cookie('banner')!='undefined')
 {
  $("#header").addClass($.cookie('banner'));
 }
});

更新代码：=

$(function () {
  if (typeof $.cookie('banner') != 'undefined') {
     $("#header").addClass($.cookie('banner'));
  }
  $("#banner-picker-toggle-button").click(function (e) {
    $("#banner-picker").slideToggle();
  });
  $("#banner-picker span").click(function (e) {
    var banner_id = $(this).attr("id");
    $.cookie('banner', banner_id);
    $("#header").removeClass().addClass(banner_id);
  });
 });

Answer 3

使用document.cookie="key:value"设置一个cookie，其中key（变量名）为key，变量的值为value。

您可以使用它来获取 cookie：

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

其中 cname 是 cookie 的名称。

jQuery: 如何将选择保存到 cookie 中？

jQuery: How can I save a selection in a cookie?

javascript

cookies

jquery