Как сохранить данные в поле ввода, если нажата конкретная кнопка

Question

Я хочу сделать, когда пользователь нажмет кнопку, он сохранит значение входных полей в localstorage.

Моя проблема в том, что после нажатия кнопки она не хранит данные в localstorage, если я обновил страницу, все входные поля пустые.

ссылка тестирования: http://jsfiddle.net/LgA2m/64/

HTML:

One: <input type="text" name="one" id="one" /> <br /> 
One Copy:<input type="text" readonly="readonly" name="OneCopy" id="OneCopy" /> 
<br /> 
<button type="button" id="click">Click</button> 

сценарий:

$('#click').click(function(){ 

$('#one').on("blur keyup change", function() { 
    localStorage.setItem($(this).attr("id"), $(this).val()); 
}); 

$('#one, #OneCopy').each(function (ind, val) { 
    $(val).val(localStorage.getItem($(val).attr("id"))); 
}); 

localStorage.setItem($('#OneCopy').attr("id"), $('#one').val()); 
$('#OneCopy').val(localStorage.getItem($('#one').attr("id"))); 

}); 

Answer 1

Ваш код довольно запутанным, вы должны действительно попытаться понять, что у вас есть, потому что я не думайте, что это делает то, что вы думаете.

Однако, я написал некоторый код, который делает то, что это звучит, как вы хотите:

$('#click').click(function() { 
    localStorage.setItem("one", $("#one").val()); 
}); 

$(function() { 
    $('#OneCopy').val(localStorage.getItem('one')); 
}); 

Answer 2

вы не должны обернуть слушателей внутри слушателя каждый раз, когда вы щелкаете было бы создать новые

просто это должно сделать это, если я вас правильно понял:

$('#click').click(function(){ 
    localStorage.setItem('one', $('#one').val()); 
    $('#OneCopy').val(localStorage.getItem('one'); 
});