如何在 cookie 中存储触发的 jquery CSS 状态

Question

当页面刷新时，我想保留一些 Javascript。这样做的最佳方法看起来像使用 jquery.cookie.js 但从文档中我仍然不清楚如何将 Jquery 存储为 cookie 记住的变量。

代码的 JS Fiddle 在这里：http://jsfiddle.net/sXz3h/2/

我想做的如下：

• 记住最近触发的 jQuery 状态的详细信息，以便它们在页面刷新时加载。

html看起来像

<div class="beans">
<div class="range">
<h2>Page title</h2>
<div class="blends blend-two">
    <img src="http://placehold.it/100x100" alt="Medium number 2">
    <div class="blend-text hide">
        <h3 class="blend-heading">Medium</h3>
        <p class="blend-blurb">Medium roasted. A little more complex with a bigger mouth feel. Clean finish.</p>
    </div>
</div>
<div class="blends blend-three">
    <img src="http://placehold.it/100/100" alt="Strong number 3">
    <div class="blend-text hide">
        <h3 class="blend-heading">Strong</h3>
        <p class="blend-blurb">Full city roast colour with a chocolate flavour. Rich in taste.</p>
    </div>
</div>
</div>
</div>

还有 JS：

$('.blend-two').click(function() {
$('.blends').each(function() {
  $('.blends').find('.blend-text').addClass('hide');
  $('.blends').find('img').css('opacity', '.5');
});
$(this).find('.hide').removeClass('hide');
$('.blend-two img').css('opacity', '1');
$('a.active, h2').css('color', '#e0812f');
if ($("div").hasClass("beans")) {
  $('.range').css('background-image', 'url(http://placehold.it/600x600)');
} else if ($("div").hasClass("freeze-dried")) {
  $('.range').css('background-image', 'url(http://placehold.it/700x700)');
} else {}
});

$('.blend-three').click(function() {
$('.blends').each(function() {
  $('.blends').find('.blend-text').addClass('hide');
  $('.blends').find('img').css('opacity', '.5');
});
$(this).find('.hide').removeClass('hide');
$('.blend-three img').css('opacity', '1');
$('a.active, h2').css('color', '#cf701c');
if ($("div").hasClass("beans")) {
  $('.range').css('background-image', 'url(http://placehold.it/800x800)');
} else if ($("div").hasClass("freeze-dried")) {
  $('.range').css('background-image', 'url(http://placehold.it/900x900)');
} else {}
});

Jquery.cookie.js 是这样做的最佳方式吗？如果是，我该如何存储状态？

Answer 1

如果你使用 HTML5，localStorage 会更容易。

设置它

localStorage.setItem('itemName', 'itemValue')

获取价值

localStorage.getItem('itemName')

删除它

localStorage.removeItem('itemName')

示例参考： http://www.w3schools.com/html/html5_webstorage.asp

Answer 2

感谢 lesssugar 建议使用本地存储，这是我最终使用的解决方案：

$('#blend2').click(function() {

  setState('blend2');
  $('.blends').each(function() {
    $('.blends > .blend-text').addClass('hide');
    $('.blends > img').css('opacity', '.5');
  });

  $('#blend2 .hide').css('display', 'block');
  $('#blend2 > .hide').removeClass('hide');

  $('#blend2 > img').css('opacity', '1');

  $('a.active, h2').css('color', '#e0812f');

  if ($('div').hasClass('beans')) {

    $('#brange').css('background-image', 'url(http://placehold.it/600x600)');

  } else if ($("div").hasClass("freeze-dried")) {
    $('#brange').css('background-image', 'url(http://placehold.it/700x700)');
  } else {

  }

});

$('#blend3').click(function() {

  setState('blend3');
  $('.blends').each(function() {
    $('.blends').find('.blend-text').css('display', 'none');
    $('.blends').find('.blend-text').addClass('hide');
    $('.blends').find('img').css('opacity', '.5');
  });

  $('#blend3 .hide').css('display', 'block');
  $('#blend3 .hide').removeClass('hide');

  $('#blend3 img').css('opacity', '1');

  $('a.active,h2').css('color', '#cf701c');

  if ($("div").hasClass("beans")) {
    $('#brange').css('background-image', 'url(http://placehold.it/800x800)');
  } else if (
    $("div").hasClass("freeze-dried")) {
    $('#brange').css('background-image', 'url(http://placehold.it/900x900)');
  } else {

  }
});

$(document).ready(function() {
  var prevState = localStorage.getItem('stateVar');
  //prevState == 'blend3' ? $( "#blend3" ).trigger( "click" ) : $( "#blend2" ).trigger( "click" );
  //console.log( prevState );
  if (prevState == 'blend3') {
    $("#blend3").trigger("click");
  } else {
    $("#blend2").trigger("click");
  }
});


function setState(id) {
  localStorage.setItem('stateVar', id)
}

问题的关键是使用变量来存储页面状态，然后在页面加载时使用唯一标识符触发变量。

希望这对某人有所帮助。 :)