Question

大家好，我有以下代码：

$(document).ready(function() {

  function a() {
    console.log("hover in")
    var type = "type-a";
    localStorage.setItem('type', type);
  };

  function b(){
       console.log("hover out")
    var type = "unknown";
    localStorage.setItem('type', "unknown");
  }


  $(".type-link").each(function(index, value) {
    $(value).hover(a, b);
  });
});

HTML

<a class="type-link"> link </a>

代码的想法是在链接悬停时我想用字符串值设置type属性，为简化起见，我刚刚引用了一个值为unknown的硬编码变量。

我看到一些不寻常的行为，因为我可以看到悬停的日志并将其悬停，但我看不到正在设置的本地存储的类型属性。

我在chrome和firefox中都看到了这种行为。

我错过了什么？

Answer 1

<强> HTML

<a class="type-link" href="#"> link1 </a>
<button id="getData">Show Data</button>

<强> JS

$(document).ready(function() {

  function a() {
    console.log("hover in")
    var type = "unknown";
    localStorage.setItem('type', type);
  };

  function b(){
       console.log("hover out")
    var type = "unknown";
    localStorage.setItem('type', "unknown");

  }

  $(".type-link").each(function(index, value) {
 // debugger;
    $(value).hover(a, b);
  });

  $("#getData").click(function(){
    alert(localStorage.getItem('type'));
  });
});

请参阅此Fiddle

Answer 2

该代码适合我。请在jsfiddle

上查看

$(document).ready(function() {

  function a() {
    console.log("hover in")
    var type = "type-a";
    localStorage.setItem('type', type);
    updateStorage()
  };

  function b(){
    console.log("hover out")
    var type = "unknown";
    localStorage.setItem('type', "unknown");
    updateStorage()
  }
  
  function updateStorage () {
    $('#local').text(localStorage.getItem('type'))
  }


  $(".type-link").each(function(index, value) {
    $(value).hover(a, b);
  });
});

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<a class="type-link"> link </a>
<p id="local"></p>

单击处理程序不在jquery中设置本地存储

2 个答案: