如何在表单字段中保存和显示先前输入的值？答案

【问题标题】：How to save and display previously entered values in the form fields?如何在表单字段中保存和显示先前输入的值？
【发布时间】：2019-06-28 11:29:46
【问题描述】：

我每页有 2 个forms。这是其中之一。

$('form').submit(function(e) {
  e.preventDefault();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  
  <div>
    <label for="sum">Sum</label>
    <input id="sum" type="number">
  	
    <label for="currency">Currency</label>
    <select id="currency">
      <option value="KZT">KZT</option>
      <option value="USD">USD</option>
    </select>
  </div>
  
  <div>
    <label for="term">Term</label>
    <select id="term">
      <option value="1">1 month</option>
      <option value="3">3 months</option>
    </select>
  </div>
  
  <input type="submit" value="Submit">
  
</form>

forms.py

class CreditFilterForm(forms.Form):
    sum = forms.CharField()
    currency = forms.ChoiceField(choices = CURRENCY_CHOICES, ...)
    term = forms.ChoiceField(choices = PERIOD_CHOICES, ...)

views.py

CreitsListView(ListView):
...

def get(self):
    ...
    little_form = CreditFilterForm(self.request.GET or None, prefix="little")
    ...


class LittleFormView(FormView):
    form_class = CreditFilterForm
    prefix = 'little'

    def form_valid(self, form):
        ...

现在，当用户输入数据并重新加载页面（没有提交），或者当他只是关闭页面并在一段时间后再次打开时 - 输入的数据消失。

如何保存和显示它们？必须使用caching。还是将输入的值存入database，然后代入？

【问题讨论】：

您需要在下拉列表中添加一个 onchange 处理程序，并在文本框中键入 keyup 并将值存储在 localstorage 或 cookie 中，然后在页面加载时设置所选值
不告诉我怎么实现吧？还是举个例子？
非常感谢。 LocalStorage 适合

标签： html django django-forms django-templates django-views

【解决方案1】：

例如。

function setVal(el) {
  var type = el.attr('type');
    if (type == 'number') {
      el.val(+localStorage.getItem(localStorage.key(i)))
    } else if (type == 'checkbox') {
        if (localStorage.getItem(localStorage.key(i)) == 'on') {
          el.prop('checked', true)
        }
    } else {
      el.val(localStorage.getItem(localStorage.key(i)))
    }
}

for (var i = 0; i < localStorage.length; i++){
  var el = $('#reservation').find('#'+ localStorage.key(i))
  setVal(el);
  var el = $('#big_form').find('#'+ localStorage.key(i))
  setVal(el);
}

$('#reservation').change(function(e){
  localStorage.setItem(e.target.id, e.target.value)
})

$('#big_form').change(function(e){
  localStorage.setItem(e.target.id, e.target.value)
})

【讨论】：