在 Javascript 中使用 LocalStorage

Question

我有侧边导航栏：

<li class="side-nav-tab">
  <a href="/item"><i class="fa fa-dashboard fa-fw"></i> Items<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/client"><i class="fa fa-bar-chart-o fa-fw"></i> Clients<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/quote"><i class="fa fa-table fa-fw"></i> Quotes<span></span></a>
</li>

jQuery:

    $(document).ready(function(){
        $('.side-nav-tab').on('click', function(){
          var arrow = $(this).find('span').attr('class');

          if ((arrow == undefined) || (arrow == '')) {
            $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
            $(this).find('span').addClass('fa arrow');
          }

        })
    })

上面的代码有效（将 class 'fa arrow' 添加到跨度中）但这只是暂时的。问题是，当您单击 $('.side-nav-tab') 时，它会将您定向到该路线，重新加载页面，然后我丢失了刚刚添加的 'fa arrow' class。

经过一些研究，我似乎可以使用 localStorage，但尝试失败：

var storage = localStore.getItem(arrow)

有什么想法吗？

谢谢

Answer 1

不要尝试为此使用本地存储。正确且更简单的方法是使用 preventDefault() 来防止 link 触发。试试这个事件处理程序：

$('.side-nav-tab').on('click', function(e){
  e.preventDefault();
  var arrow = $(this).find('span').attr('class');
  if ((arrow == undefined) || (arrow == '')) {
        $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
        $(this).find('span').addClass('fa arrow');
   }
 });

在 Javascript 中使用 LocalStorage

Using LocalStorage in Javascript

javascript

jquery

local-storage