單擊處理程序沒有設置本地存儲中的jQuery

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> 

代碼的想法是對的鏈接的懸停我想設置使用字符串值的類型屬性，爲了簡化的目的，我剛剛引用了一個硬編碼的變量，其值爲未知。

我看到一些不尋常的行爲，我可以看到懸停的日誌並將鼠標懸停在外但我看不到正在設置的本地存儲的類型屬性。

我在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>