Javascript 烧瓶：记住变量+；整个应用程序中的DOM操作

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

下面展示了我认为应该有效的方法。我有一个输入框，输入一个数字。还有一个按钮将相同的输入字段添加到DOM中。当用户单击“提交”时，这些输入将附加到

input\u list

，列表将显示在UI上。因为

input\u list

是一个全局变量，所以应用程序将记住这些输入及其值（即使我返回浏览器或重新加载页面），这就是我要寻找的

同样，我不确定这是否是最好的方法。我知道

flask.g

可以用来存储应用程序全局变量，但我不确定这是正确的用例（我只见过用于存储数据库连接的）。我还听说cookies可能有助于记住DOM中的更改。任何想法/例子都会很有帮助，如果有人认为我的方式是好的，我将感谢下面对我的代码的反馈

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>

{{input_list}

{%if输入\列表%}
{input_list%中的i的百分比}
{%endfor%}
{%else%}
{%endif%}
添加输入
$（文档）.ready（函数（）{
$（“#添加输入”）。单击（函数（）{
var$new_input=$（''，{type:'number'，name:'x'}）；
$（'#input_container'）。追加（$new_input）；
});
})

你似乎走对了方向。但是，我会避开全局变量，因为这实际上会将变量暴露给其他并发客户机。但是，我建议使用烧瓶对象：

然后在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)

---

您的

请求。表单

将仅包含有关已提交字段的信息。那么，为什么不从

request.form

中获取项目并将它们粘贴到最终呈现的HTML中呢？我不明白你的意思是什么？

request.form

是不可变的dict，它包含对{'DOM\u name'：'DOM\u value'}。所以，如果您的表单中有任何带有属性

name

=

的标记，并且它有一些值，那么您可以参考

request.form.get（'name'）

，在服务器端获取该值。稍后，您可以将此值放入新生成的表单中。这正是我想要的。谢谢。我是否需要一个登录/注销系统来使用会话（这是我过去看到的）？或者flask只是为它看到的每个新浏览器创建一个新的会话对象（看起来它在某种程度上使用了密钥），而不需要用户身份验证。会话由客户端绑定。：）我如何准确地访问jinja模板中的

会话['input_list']

？它是

{{session.input_list}

？它取决于您在

呈现_模板

中传递给上下文变量的内容。在我编写的示例中，我只使用了

input\u list=session.get（'input\u list'，False）

，它本质上是将会话的input\u list对象分配到

input\u list

变量中，然后在我的

render\u template

中，我将

input\u list

传递到模板的

input\u list

上下文变量中。因此，为了访问jinja端的上下文变量，只需使用

{{input\u list}

获取它即可。您的

input\u page.html

页面应该足以处理我在示例中编写的内容。

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)