使用本地存储设置用户偏好的类

Question

请参阅下面的“最新更新” ——Niel S 为这个问题的 VIEW MODE 部分找到了一个本地存储解决方案——但我仍然需要找到一个解决方案来让本地存储为 SORT BY 功能工作。

我的问题是这样开始的：

请看看我的小提琴

如你看到的：

1) SORT BY：我可以选择按价格或人数对子元素进行排序。

2）查看模式：默认情况下，子元素被视为 3 列布局（默认视图） ......如果他们愿意，我已经为用户提供了将视图切换到 1 列布局（Alt 视图）的选项。

太好了，一切都 100% 正常，但是我的问题是这些选择或首选项无法在浏览我的网站的整个会话中保存或携带。 换句话说，如果用户决定在以下位置显示列表：

A)价格从低到高

B)替代视图

...然后单击第 2 页（其中有更多这些列表），布局和顺序将全部恢复正常，从而使用户必须重新单击他们之前在第一页上选择的首选项 -这意味着这个设施非常愚蠢（如果它不记得的话）。

所以我知道本地存储是解决方案，但是我正在努力实现它但没有成功，这可能是因为我对它很陌生。

我有其他使用本地存储的脚本，我正在尝试复制他们所做的并尝试将其应用于此。

例如，我对VIEW MODE用户选项的尝试是添加：

localStorage.setItem("viewmode", "alt");

因此，要完成我的方法，代码将如下所示：

  jQuery(document).ready(function() {

  $('.order a.layout').on('click', function(e){
  e.preventDefault();

  if($(this).hasClass('active')) {
  // do nothing if the clicked link is already active
  return;
  }

  $('.order a.layout').removeClass('active');
  $(this).addClass('active');


  var clickid = $(this).attr('id');
  $('.listings').fadeOut(240, function(){
  if(clickid == 'thumbnails-list') {
    $(this).addClass('alt');
  localStorage.setItem("viewmode", "alt");
  } else {
    $(this).removeClass('alt');
  }

  $('.listings').fadeIn(200);
});

});

});

哪个不起作用。

这仅适用于 VIEW MODE 部分......现在为SORT BY部分设置 localstorage 似乎有点令人生畏/非常高的等级，我尝试了一些微弱的尝试，但我知道我做得不对。

是否有一个简单的解决方案可以将本地存储应用于这两个首选项？

我真的很感激一些帮助/指导，我可以想象这对于希望对他们的项目做同样的其他人来说是一个很好的解决方案。

更新：

我已经分解了脚本来解决所有的 VIEW MODE 部分。 请参阅此小提琴和以下 javascript：

jQuery(document).ready(function() {

$('.order a.layout').on('click', function(e){
e.preventDefault();

if($(this).hasClass('active')) {
  // do nothing if the clicked link is already active
  return;
}

$('.order a.layout').removeClass('active');
$(this).addClass('active');


var clickid = $(this).attr('id');
$('.listings').fadeOut(240, function(){

  if(clickid == 'thumbnails-list') {
    $(this).addClass('alt');
    localStorage.setItem("viewmode", "alt");
  } 

  else {
    $(this).removeClass('alt');
    localStorage.setItem("viewmode", "default");
  }


  $('.listings').fadeIn(200);

});

});

});

请注意，在上面的 javascript 中，我创建了 setItem：

if(clickid == 'thumbnails-list') {
    $(this).addClass('alt');
    localStorage.setItem("viewmode", "alt");
  } 

else {
    $(this).removeClass('alt');
    localStorage.setItem("viewmode", "default");
  }

当我继续 Chrome 资源 > 本地存储并测试这些 setItems 是否有效时，它们确实有效。

我的问题是我正在努力完成让我头疼的 getItem部分！

最新更新（第 2 部分）：

Neil S 为 VIEW MODE 状态提供了一个伟大而简单的解决方案！ 奇迹般有效！

我现在正在努力让SORT BY 价格或 pax （参见原始/第一小提琴）也使用本地存储，但是事实证明这比我想象的要困难得多：

请参阅我尝试使用本地存储按价格排序的这个小提琴。

使这更复杂的是排序依据可以按升序或降序进行。

正如你在小提琴中看到的，我已经完成了这个（我已经做了很多其他的尝试，但这看起来最合乎逻辑）：

if (localStorage.getItem('sortby') == 'price') {

$(function() {
ratingAscending = true;
var sorted = $('.listings').sort(function(a,b) {
    return (priceAscending ==
           (convertToNumber($(a).find('span').html()) < 
            convertToNumber($(b).find('span').html()))) ? 1 : -1;
});
priceAscending = !priceAscending;
$('.results').append(sorted);
})

}

这里没有什么特别的......我所做的一切都被替换了：

$('.container').on('click','.sortbyprice',function(){

和

$(function() {

...因为点击功能现在已经过时了，因为它是一个“记忆”的东西。

这当然应该有效吗？

我试过这个：

if (localStorage.getItem("sortby") == "price") {

     // this is where the answer probably lies
     $('.container .results').append(sorted);

}

并没有成功。

我只需要让本地存储记住用户选择了偏好SORT BY - 价格...这样当用户点击第 2 页时...该页面上的列表也按价格排序。

Answer 1

您没有任何代码来加载 localstorage 值并将类应用于列表。

我已经更新了你的小提琴： https : //jsfiddle.net/n2o70xgg/2/

这是我添加的内容：

 if (localStorage.getItem('viewmode') == 'alt') {
    $('.listings').addClass('alt');
}