在 Javascript 中使用 LocalStorage

Using LocalStorage in Javascript

我有侧边导航栏:

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

有什么想法吗?

谢谢

不要尝试为此使用本地存储。正确且更简单的方法是使用 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');
   }
 });