使用本地存储设置用户首选项的类 [英] Using Local Storage to set a class for user preference

问题描述

请参见下面的最新更新" -Niel S找到了针对该问题的查看模式"部分的本地存储解决方案-但我仍然需要找到一种解决方案来使本地存储能够正常工作SORT BY函数.

Please see "Latest update" below - Niel S has found a local storage solution for the VIEW MODE part of this question - but I still need to find a solution to get local storage to work for the SORT BY function.

请看看我的小提琴

Please take a look at my fiddle

如您所见:

1)排序方式:我可以选择按价格或pax对子元素进行排序.

1) SORT BY: I've got the option of sorting the child elements either by price or pax.

2)查看模式:默认情况下，子元素被视为3列布局(默认视图) ...并且我已为用户提供了选项如果愿意，可以将视图切换为1列布局(Alt视图).

2) VIEW MODE: The child elements by default are viewed as a 3 column layout (Default View) ... and I've given the user the option of switching the view to a 1 column layout (Alt View) if they prefer.

太好了，所有方法都可以100％正常运行，但是我的问题是，在我浏览网站的整个过程中，这些选择或偏好无法保存或保留.换句话说，如果用户决定在以下位置显示列表:

Great, that all works 100% fine however my problem is that these choices or preferences can't be saved or carried throughout their entire session surfing my website. In other words, if the user decides to display the listings in:

A)价格从最低到最高

B)替代视图

...，然后单击第2页(其中有更多列表)，布局和顺序将全部恢复正常，因此，用户必须在菜单上重新选择之前选择的首选项.第一页-这意味着该功能非常愚蠢(如果无法记住的话).

... and then click on page 2 (where there are more of these listings), the layout and order will all go back to normal thus making the user have to re-click on the preferences they had chosen before on the first page - which means that this facility is pretty stupid (if it cannot remember).

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

So I know local storage is the solution however I am battling to implement it with no success and that's probably because I am very new to it.

我还有其他正在使用本地存储的脚本，我正在尝试复制它们所做的操作，然后尝试将其应用于此.

I've got other scripts that are using local storage and I am trying to copy what they did and try apply it to this.

例如，我尝试添加 VIEW MODE 用户选项:

Like for example, my attempt for the VIEW MODE user option was adding:

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

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

So to complete my method, the code would look like this:

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

});

});

什么都不起作用.

这仅用于查看模式"部分...现在为 SORT BY 部分设置本地存储似乎有些令人生畏/成绩非常高，我尝试了一些微不足道的尝试，但我知道我做错了.

That's just for the VIEW MODE part ... now setting localstorage for the SORT BY part seems a bit daunting / very higher grade and I've attempted a few feeble attempts but I know I'm not doing it right.

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

Is there a simple solution to apply local storage to both preference options?

我非常感谢您的帮助/指导，我可以想象这对于那些希望在他们的项目中做到同样的人来说是一个很好的解决方案.

I'd really appreciate some help / guidance and I can imagine this would be a great solution for others looking to do the same with their project.

更新:

我已经分解了脚本，仅解决全部的查看模式"部分. 参见此小提琴和以下javascript:

I've broken down the script to tackle just the VIEW MODE part of it all. See this fiddle and the following 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:

Notice in the javascript above, I've created the setItem's:

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

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

当我使用Chrome资源>本地存储并测试这些setItem是否正常工作时，它们确实存在.

When I go on Chrome resources > local storage and test to see if these setItems are working, they are indeed.

我的问题是我正在努力做到 getItem 这一步！

My problem is that I am battling to do the getItem part which is doing my head in!

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

Neil S has provided a great and simple solution for the VIEW MODE state! Works like a charm!

我现在正在尝试获取按价格或pax排序的排序方式(请参阅原始内容/最早的小提琴)也要使用本地存储，但是事实证明，这比我想象的要难得多:

I am now trying to work on getting the SORT BY price or pax (see original / very first fiddle) to also use local storage however this is proving to be much harder than I thought:

请参阅 小提琴 按价格排序.

Please see this fiddle of my attempt to use local storage for the sort by PRICE.

更复杂的是排序依据可以升序或降序.

What makes this more complicated is the fact that the sort by can either go in ascending or descending order.

正如您在小提琴中看到的那样，我已经做到了这一点(并且我还做了很多其他尝试，但这看起来很合乎逻辑):

As you can see in the fiddle, I've done this (and I've done many other attempts but this looks most logical):

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

}

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

Nothing special here ... all I've done is replaced:

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

与

$(function() {

...，因为单击功能已经过时了，因为它已经是内存"了.

... because the click function is obsolete now that it's a 'memory' thing.

那肯定行得通吗?

我已经尝试过了:

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

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

}

没有成功.

我只需要让本地存储记住用户选择了首选项 SORT BY-价格 ...，以便当用户单击第2页时...该页面上的清单是也按价格排序.

I just need to have local storage remember that the user had chose the preference SORT BY - price ... so that when the user clicks on page 2 ... the listings on that page are also sorted by price.

推荐答案

您没有任何代码可以加载localstorage值并将该类应用于清单.

You don't have any code to load the localstorage value and apply the class to listings.

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

I've updated your fiddle: https://jsfiddle.net/n2o70xgg/2/

这是我添加的内容:

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

这篇关于使用本地存储设置用户首选项的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！