htmlフォームフィールドの状態を保存します

Question

今日私は自分のプロジェクトで興味深いものを考え出しました。私はいくつかのフィールド（例：ナンバープレート、購入日、州）を持つ検索ボックスを持っており、その中にはオペレータフィールドがあります。 （例：>、<、=） 検索結果を投稿して結果を返した後、演算子の1つを変更したいが、常にその演算子の最初の要素に変更する。フィールドの状態を「保存」するためにできることはありますか？

私はセッションでそれを行うことができますが、それはかなり醜いので、それは醜いでしょう。

ありがとうございました！

Answer 1

あなたがlocalStorageを使用するための小さなスニペット：

• 私は、フォーム上のすべてのバックアップを取るために5秒としてタイムアウトしました。
• ページがロードされたら、localStorageのものをロードします。

window.onload = function() { 
 
    if (typeof(Storage) !== "undefined") { 
 
    if (typeof localStorage["name"] !== "undefined") { 
 
     document.getElementById("name").value = localStorage["name"] ? localStorage["name"] : ""; 
 
     document.getElementById("pass").value = localStorage["pass"] ? localStorage["pass"] : ""; 
 
    } 
 
    // Code for localStorage/sessionStorage. 
 
    setInterval(function() { 
 
     document.getElementById("saving").innerHTML = 'Saving...'; 
 
     setTimeout(function() { 
 
     document.getElementById("saving").innerHTML = ''; 
 
     }, 500); 
 
     localStorage.setItem("name", document.getElementById("name").value); 
 
     localStorage.setItem("pass", document.getElementById("pass").value); 
 
    }, 5000); 
 
    } 
 
};

strong {display: inline-block; width: 50px;}

<form action=""> 
 
    <strong>Name:</strong> <input type="text" name="name" id="name" /><br> 
 
    <strong>Pass:</strong> <input type="password" name="password" id="pass" /><br> 
 
    <span id="saving"></span> 
 
</form>

注：localStorageスニペットでは、サンドボックス機能です。だからここでは動作しません。 JSBinでチェックイン：http://output.jsbin.com/bubukunoke

Answer 2

私は最後にセッションで問題を解決しました。

フォームを投稿すると、すべてのコンテンツがセッションに保存され、ビューIで存在する場合はチェックが行われ、存在する場合はフィールド値として設定されます。