ブラウザセッションでフォームデータを保存

Question

フォームが送信されたときに表示されるdivがありますが、ページを更新するとデータが消え、ページを更新する際にデータを保存する方法を探しています。

データをセッションに保存する方法はわかっていますが、フォーム全体ではありません。この問題にどうやってアプローチしますか？ Javascriptでフォーム全体を保存することも可能ですか？

function showHide() { 
 
    var div = document.getElementById("hidden_form"); 
 
    if (div.style.display == 'none') { 
 
    div.style.display = ''; 
 
    } else { 
 
    div.style.display = 'none'; 
 
    } 
 
}

<form name="product_form" id="product_form" enctype="multipart/form-data" action="admin_products.php" method="post" accept-charset="utf-8" onsubmit="showHide(); 
 
         return false;"> 
 
    <input type="textfield" id="title" name="title" value="" readonly> 
 
    <div id='hidden_form' style="display:none"> 
 

 
    <input type="text" id="name" name="name" value="" placeholder="Product Name"> 
 

 
    <label id="option_1" name="option_1">Option Name</label> 
 
    <input type="text" id="optionn" name="optionn" value="" placeholder="Product Name"> 
 

 
    </div> 
 

 
    <input type="submit" id="add" name="add" value="Save" class="" <!--onclick="myFunction()-->">

Answer 1

あなたがsubmitを打つときは、ページをリロードし、データを失うことになります。 localStorageとJSON.stringify()を使用すると、データをブラウザにローカルに保存し、ページを読み込むときにデータを取得することができます。

localStorageには文字列しか格納できないため、オブジェクトを文字列に変換する必要があります。それはJSON.stringify()が出場するところです。そして、それをフェッチするときには、JSON.parse()を使ってそれをオブジェクトに戻すことができます。

$("#btnSubmit").click(function() { 
 
    var data = {}; 
 
    data.Text = $("#myText").val(); 
 
    data.isProcessed = false; 
 

 
    localStorage.setItem("myData", JSON.stringify(data)); 
 
}); 
 

 

 
//On load 
 
var data = localStorage.getItem("myData"); 
 
var dataObject; 
 

 
if (data != null) //There's stored data 
 
{ 
 
    dataObject = JSON.parse(data); 
 
    $("#myText").val(dataObject.Text) 
 

 
    localStorage.removeItem("myData"); //Remove data, otherwise it'll be there for a long time. 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <form method="post"> 
 
    <input type="text" id="myText" /> 
 
    <button type="submit" id="btnSubmit">Submit</button> 
 
    </form> 
 
</div>

詳しいのlocalStorageに関する情報：W3Schools
JSON.stringifyとJSON.parseに関するさらに詳しい情報：MDN

スニペットが動作する場合、私は以来、知りませんそれは投稿を提出するでしょう。このスニペットをコピーして、ローカルシステムで試してみてください。

EDIT私は小さな間違いを自分で作ったとして、私は私のスニペットを更新 。しかし私が推測したように、SOはlocalStorageへのアクセスを許可していません。

もちろん、このコードを$(document.ready(function() { ... });に入れておかなければなりません。自分のHTMLスニペットに<form></form>を追加することを忘れました。そして私はちょうど私のローカルシステムでそれをテストし、それは正常に動作しています。

Answer 2

localStorageを試すことができます。現代のブラウザにはすべて、キーバリューのストレージです。あなたは古いブラウザのサポート（サーバサイドスクリプトの代わりにjavascriptで書かれている）が必要な場合、に書き込むための単純なライブラリがcookiesに置き換えられています。私はlocalStorageであなたに例をあげる

：

//emulating that the form was showed (save clicked) and the value true stored on the localStorage 
    localStorage.setItem('displayedForm', true); 

    //initializing the state of the page 
    initialize(); 

    function showHide() { 
     var div = document.getElementById("hidden_form"); 
     if (div.style.display == 'none') { 
      div.style.display = ''; 
      localStorage.setItem('displayedForm', true);//if the conditions are meet to display the form, store it on the localStorage 
     } else { 
      div.style.display = 'none'; 
      localStorage.setItem('displayedForm', false);//if the conditions are **NOT** meet to display the form, store it on the localStorage as well 
     } 
    } 
    function initialize() { 
     if (localStorage.getItem('displayedForm') === true || localStorage.getItem('displayedForm') === 'true') { 
      var div = document.getElementById("hidden_form"); 
      div.style.display = ''; 
     } 
    } 

ワーキングフィドル：https://jsfiddle.net/y0uep73e/