Question

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

我的问题开始于：

请查看我的fiddle

如你所见：

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

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

很好，所有这些都是100％罚款，但我的问题是这些选择或偏好无法保存或在整个会话中浏览我的网站。换句话说，如果用户决定在：

中显示列表

A）价格从最低到最高

B） Alt View

...然后点击第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部分。请参阅此fiddle和以下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资源时＆gt;本地存储和测试以查看这些setItem是否正常工作，确实是这样。

我的问题是我正在努力做 getItem 部分，这是我的头脑！

最新更新（第2部分）：

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

我现在正在努力获得 SORT BY价格或pax （请参阅原始/非常小的第一小提琴）以使用本地存储，但事实证明这比我想象的要困难得多：< / p>

请参阅此 fiddle 我尝试使用本地存储进行PRICE排序。

使这更复杂的原因是排序依据可以按升序或降序排列。

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

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

使用本地存储为用户首选项设置类

我的问题开始于：

最新更新（第2部分）：

1 个答案: