Tarayıcı oturumunda form verilerini kaydet

Question

Bir form gönderildiğinde görünen bir div var, ancak sayfayı yenilediğimde, verilerim kayboluyor ve sayfa yenilemesinde verilerimi korumanın bir yolunu arıyorum.

Bir oturumda verileri nasıl kaydedileceğini biliyorum, ancak bir formun tamamını değil. Bu konuya nasıl yaklaşırım? Tüm formu Javascript ile kaydetmek mümkün mü?

Answer 1

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()-->">

Eğer submit vurmak, sayfayı yeniden ve verilerinizi kaybedersiniz. localStorage ve JSON.stringify() kullanarak, verileri tarayıcınıza yerel olarak kaydedebilir ve sayfanızı yüklediğinizde getirebilirsiniz.

localStorage yalnızca dizeleri saklayabilir, nesneyi bir dizeye dönüştürmeniz gerekir. JSON.stringify()'un devreye girdiği yer burası. Ve onu getirdiğinizde, onu bir nesneye dönüştürmek için JSON.parse() kullanabilirsiniz. localStorage üzerinde

$("#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>

fazla bilgi: JSON.stringify ve JSON.parse üzerinde W3Schools
fazla bilgi: MDN

ben pasajı çalışacak bilmiyor yoksa bu yana bir gönderi gönderir. Bu snippet'i kopyalayın ve yerel sisteminizde deneyin.

DÜZENLEME Ben küçücük bir hatayı kendim yaptım gibi benim pasajını güncellenmiş . Ancak şüphelendiğim gibi SO, localStorage'a erişime izin vermiyor.

Ayrıca, iş için bu kodu $(document.ready(function() { ... }); ürününüze koymanız gerekir. HTML snippet'ime <form></form> eklemeyi unuttum. Ve sadece yerel sistemimde test ettim ve gayet iyi çalışıyor.

Answer 2

localStorage ile deneyebilirsiniz. Tüm modern tarayıcıların sahip olduğu anahtar-değer depolama alanı. Eski tarayıcı desteğine ihtiyacınız varsa (sunucu tarafı komut dosyaları yerine javascript ile yazılırsa) localStorage'a yazmanız için cookies geri dönüşü olan basit kütüphaneler vardır. Bir nesnenin verilerinizi kaydedebilirsiniz https://jsfiddle.net/y0uep73e/