使用数据属性设置LocalStorage

Question

我有两个不同类型的按钮，我想保存用户的选择到localStorage和显示在一个‘购物车’。我很难弄清楚如何将它们分开。现在，来自两者的所有内容都在展示中。

JSFiddle

每个按钮都将在data-attribute中设置一个不同的值，但有两种类型的值-平面图和属性。

JS：

function showElem1() {
    var $ul = $('<ul />', { "class": "cart1" });
      for (var a = 0, len = localStorage.length; a < len; a++)   {
        var $li = $('<li />', { text: localStorage.key(a) });
        $('<span />', { "class": "removeitem", data: { remove: localStorage.key(a) }, html: " <i class='icon-trash2'></i>" })
          .appendTo($li);
        $li.appendTo($ul);
      }
    $ul.appendTo($('.cart1').empty());
};    

function showElem2() {
    var $ul = $('<ul />', { "class": "cart2" });
      for (var a = 0, len = localStorage.length; a < len; a++)   {
        var $li = $('<li />', { text: localStorage.key(a) });
        $('<span />', { "class": "removeitem", data: { remove: localStorage.key(a) }, html: " <i class='icon-trash2'></i>" })
          .appendTo($li);
        $li.appendTo($ul);
      }
    $ul.appendTo($('.cart2').empty());
};

showElem1();
showElem2();

$("body").on('click', '.property', function() {
    if(!localStorage.getItem($(this).data('property'))) {
          localStorage.setItem($(this).data('property'), 0 );
    }                         
     showElem1();
});

$("body").on('click', '.floor-plan', function() {        
    if(!localStorage.getItem($(this).data('floorplan'))) {
          localStorage.setItem($(this).data('floorplan'), 1 );
    }                 
     showElem2();
});


$(".cart").on('click', '.removeitem', function() {
    localStorage.removeItem($(this).data('remove'));
    showElem1();
    showElem2();
});  

HTML：

 <div class="cart">
       <div class="cart1"></div>
 </div>

 <div class="cart">
       <div class="cart2"></div>
 </div>

 <a data-property="Tri Estate, Kennewick, WA" class="property"> Add to Selections</a>

 <a data-floorplan="Floor Plan 1" class="floor-plan">Add Floorplan</a>

Answer 1

如我所见，您没有检查希望在2个函数showElem1和showElem2中显示的项的类型。

谢谢,