javascript - Flask:在整个应用程序中记住变量 + DOM 操作

Question

我正在开发一个包含大量输入的 Flask 应用程序。一些输入依赖于其他输入，因此有一些 DOM 操作来公开这些依赖的输入。我希望应用程序在用户返回时记住 DOM 状态，这样用户就不必重新输入所有内容。执行此操作的最佳方法是什么？

下面演示了我认为应该起作用的方法。我有一个带数字的输入框。还有一个按钮可以将相同的输入字段添加到 DOM。当用户单击提交时，这些输入将附加到 input_list并且列表显示在 UI 上。因为input_list是一个全局变量，应用程序将记住这些输入及其值(即使我返回浏览器或重新加载页面)——这就是我要找的。

同样，我不确定这是否是最好的方法。我知道flask.g可用于存储应用程序全局变量，但我不确定这是正确的用例(我只看到用于存储数据库连接)。我还听说 cookie 可能有助于记住 DOM 中的更改。任何想法/示例都会有所帮助，如果有人认为我的方法没问题，我将不胜感激对下面我的代码的反馈。

应用.py:

@app.route('/input_page', methods=['GET', 'POST'])
def input_page():
    global input_list
    input_list = []
    if request.method == 'POST':
        if request.form.get('empty_list'):
            input_list = []
        elif request.form.get('submit_list'):
            input_list = [int(i) for i in request.form.getlist('x')]
    return render_template('input_page.html', input_list=input_list)

输入页面.html:

<p>{{ input_list }}</p>

<form method="POST" action="/input_page">
  <div id="input_container">
    {% if input_list %}
      {% for i in input_list %}
        <input type="number" name="x" value="{{ input_list[loop.index0] }}">
      {% endfor %}
    {% else %}
      <input type="number" name="x">
    {% endif %}
  </div>
  <button type="button" id="add_input">Add Input</button>
  <input type="submit" value="Submit List" name="submit_list">
  <input type="submit" value="Empty List" name="empty_list">
</form>

<script>
  $(document).ready(function(){
    $('#add_input').click(function(){
      var $new_input = $('<input>', {type: 'number', name: 'x'});
      $('#input_container').append($new_input);
    });
  })
</script>

Answer 1

您似乎走在正确的轨道上。但是，我会回避全局变量，因为它实质上会将变量暴露给其他并发客户端。但是，我建议使用 Flask session对象:

from flask import Flask, session, ... # other flask modules you already have imported

然后在您的 Python 代码中，您将使用:

def input_page():
    if request.method == 'POST':
        if request.form.get('empty_list'):
            session['input_list'] = []
        elif request.form.get('submit_list'):
            session['input_list'] = [int(i) for i in request.form.getlist('x')]
    input_list = session.get('input_list', False)  # create an input_list var that either grabs the 'input_list' object from the session object or defaults to False if no key found
    return render_template('input_page.html', input_list=input_list)