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

Question

I'm developing a Flask application that contains a ton of inputs. Some the inputs depend on other inputs so there is some DOM manipulation to expose these dependent inputs. I would like for the application to remember the DOM state when the user goes back so the user doesn't have to reenter everything. What's the best way to do this?

Below demonstrates what I think should work. I have an input box that takes a number. There is also a button that adds the same input field to the DOM. When the user clicks submit, these inputs are appended to input_list and the list is displayed on the UI. Because input_list is a global variable, the application will remember these inputs and their values (even if I go back in the browser or reload the page) - this is what I'm looking for.

Again, I'm not sure if this is the best way to do it. I know flask.g can be used to store application globals but I'm not sure this is the right use case for that (I've only seen that used to store database connections). I've also heard cookies may be useful for remembering changes in the DOM. Any thoughts/examples would be helpful and if anyone thinks my way is okay, I'd appreciate feedback on my code below.

app.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)

input_page.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

You seem to be on the right track. However, I would shy away from a global variable because that essentially exposes the variable to other concurrent clients. I would however, recommend using the Flask session object:

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

Then in your Python code, you'd use:

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)