Как сохранить значение и вводить внутри кнопки с помощью localStorage

Question

Я только начал изучать javascript. То, что я хочу сделать, это сохранить значение ввода после того, как я нажму «Сохранить» внутри кнопки, используя localStorage и изменив его имя. Благодарю.

Example Screenshot

<h3 id="titlu" class="bh">Chat</h3> 
<input type="button" name="userName" id="Uname" class="Uname" value="Username"/> 
<div id="popUp"> 
    <p>Set your username:</p> 
    <input type="text" name="setusername" id="userSet"> 
    <input type="button" id="save" class="pophide" name="save" value="save"/> 
</div> 

$(document).ready(function(){ 
    $("#save").click(function(){ 
     var valoare = $("#userSet").val(); 
     if (typeof(Storage) !== "undefined") { 
      // Store 
      localStorage.user = valoare; 
      // Retrieve 
      document.getElementById("Uname").innerHTML = localStorage.user; 
     } else { 
      document.getElementById("Uname").innerHTML = "Sorry, your browser does not support Web Storage..."; 
     } 
    }); 
}) 

Answer 1

Ваш код, как правило, хорошо. Единственная реальная проблема, которую я вижу, - это то, как вы устанавливаете текст в конце.

Как Uname является <input type="button">, вы используете его аналогично <input type="text">. Чтобы изменить отображаемый текст, вам необходимо установить его value, а не innerHTML.

Как вы используете JQuery, вы можете использовать val() как вы сделали, чтобы прочитать значение входного ранее:

$("#Uname").val(localStorage.user); 

Вторая маленькая точка. Как правило, хорошо использовать localStorage.user, но безопаснее использовать стандартные вызовы, setItem() и getItem(), чтобы избежать противоречия с существующим свойством объекта Storage, например. localStorage.setItem = 'My Set Item' вызовет у вас проблемы.

Следующие должны работать для вас:

$(document).ready(function(){ 
    // display previous stored username, if set 
    var prevUname = localStorage.getItem("user"); 
    if(prevUname !== null) { 
     $("#Uname").val(localStorage.getItem("user")); 
    } 

    $("#save").click(function(){ 
     var valoare = $("#userSet").val(); 
     if (typeof(Storage) !== "undefined") { 
      // Store 
      localStorage.setItem("user", valoare); 

      // Retrieve 
      $("#Uname").val(localStorage.getItem("user")); 
     } else { 
      $("#Uname").val("Sorry, your browser does not support Web Storage..."); 
     } 
    }); 
}) 

Working jsFiddle