提出されていないフォームデータを覚えておくには？

Question

フォームに入力した内容（まだ送信されていないページ）をブラウザに保存させて、入力したデータに影響を与えないようにするにはどうすればよいですか？

私はユーザーが番号を入力するフォームを持っています。初期状態では、フォームのデフォルトは0です。私はlocalStorageにデータを格納しているので、ブラウザはデータを覚えることができます。ただし、ページをリフレッシュすると、ユーザーが入力したデータは消え、デフォルトでは0が表示されます。 （まだのlocalStorageデータがそれのために存在する）

私はjQueryの

$(".formClassName").val(localStorage.getItem(key)); 

を使用しようとしましたが、それは動作しません。誰も私にこのことについて助言を与えることができますか？事前にありがとう。

編集：私はそれが問題に機能液を示してい

//JavaScript 
<script> 
//Using on because the website retrieves the above form dynamically 
$(document).on("click", ".saveData", function(e){ 
    //retrieve the number entered in the form 
    var userNum = $(this).siblings(".dataEntered").val(); 
    //retrieve the value in name attribute 
    var thisFormName = $(this).attr("name"); 
    //store the data 
    localStorage.setItem(thisFormName, userNum); 

    //Now that the save button has been pressed (not submitted to the 
    //server yet), and the data is stored in localStorage, I want to 
    //the page to show the number in userNum even after you refresh the page 
    //but this does not work. 
    $(".dataEntered").val(localStorage.setItem(thisFormName)); 

}); 
</script> 

Answer 1

使用クッキー：クッキーが削除されない限り

function addCookie(sName,sValue,day) { 
    var expireDate = new Date(); 
    expireDate.setDate(expireDate.getDate()+day); 
    document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString(); 
} 
function getCookies() { 
    var showAllCookie = ''; 
    if(!document.cookie == ''){ 
    var arrCookie = document.cookie.split('; '); 
    var arrLength = arrCookie.length; 
    var targetcookie ={}; 
    for(var i=0; i<arrLength; i++) { 
     targetcookie[unescape(arrCookie[i].split('=')[0])]= unescape(arrCookie[i].split('=')[1]); 
     } 
    return targetcookie; 
} 

---

addCookie('type','1',1024); 
var cookiesample = getCookies(); 
$(".formClassName").val(cookiesample.type); 

cookiesample.typeを思い出したことができます。

Answer 2

チェックアウトこのcodepen：

<form> 
    <!--There are multiple forms, and the only difference among them is the "name" attribute --> 
    Enter a number <input type="text" value="0" class"dataEntered" name="****"> 
    <!--The button below saves the data entered in the above form --> 
    <input type="button" class="savedata" value="Save Value" name="****"> 
</form> 

そして、私は以下のようなのlocalStorageにデータを追加しています：私のフォームはこのようになります。また、DOMが準備ができているかどうかをjQueryスクリプトで確認する必要がある場合は、の短い手の$(function() { })を使用して行うことができます。

$(function() { 
    var input = $("[type=text]"); 
    var thisFormName = input.attr("name"); 

    if (localStorage.getItem(thisFormName)) { 
    var value = parseInt(localStorage.getItem(thisFormName)); 
    input.val(value); 
    } 

    $(document).on("click", ".savedata", function(e) { 
    var userNum = input.val(); 
    localStorage.setItem(thisFormName, userNum); 
    input.val(localStorage.getItem(thisFormName)); 
    }); 
});