Flask表单缓存需求：实现视频观看时暂存已填表单

Hey there! Since you're new to Flask and web development, let's walk through some practical ways to cache your form data so users can watch their videos without having to submit mid-viewing. These solutions range from simple client-side tricks to server-side persistence, depending on your needs.

Option 1: Client-Side Caching with localStorage (Simplest) #

This is the easiest approach—we'll save form inputs directly to the user's browser storage using JavaScript. It requires zero server changes and works even if the user refreshes the page.

First, update your HTML template to add a bit of JS that saves inputs as the user types, and restores them when the page loads:

<form method="POST">
    {{ form.hidden_tag() }}
    
    <div>
        {{ form.string1.label }}
        {{ form.string1(id="string1") }}
    </div>
    <div>
        {{ form.selectField.label }}
        {{ form.selectField(id="selectField") }}
    </div>
    
    {{ form.submit() }}
</form>

<script>
    // Restore saved form data on page load
    document.addEventListener('DOMContentLoaded', () => {
        const savedString = localStorage.getItem('form_string1');
        const savedSelect = localStorage.getItem('form_selectField');
        
        if (savedString) document.getElementById('string1').value = savedString;
        if (savedSelect) document.getElementById('selectField').value = savedSelect;
    });

    // Save data to localStorage as user types/changes inputs
    document.getElementById('string1').addEventListener('input', (e) => {
        localStorage.setItem('form_string1', e.target.value);
    });

    document.getElementById('selectField').addEventListener('change', (e) => {
        localStorage.setItem('form_selectField', e.target.value);
    });
</script>

Pros: No server setup, instant saving, works offline.
Cons: Data is tied to the user's browser (clearing cache deletes it), not suitable for cross-device persistence.

Option 2: Server-Side Caching with Flask-Session #

If you want data stored securely on your server (and accessible across sessions if you add user authentication), use Flask-Session to save form drafts in the user's session.

First, install Flask-Session and configure your app:

pip install flask-session

Then update your Flask app code:

from flask import Flask, session, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, SelectField, SubmitField
from wtforms.validators import DataRequired
from flask_session import Session

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-strong-secret-key-here'
app.config['SESSION_TYPE'] = 'filesystem'  # Stores sessions on disk; can use Redis too

Session(app)

class MyForm(FlaskForm):
    string1 = StringField('string', validators=[DataRequired()])
    selectField = SelectField('Select', choices=['Choice 1','Choice 2','Choice 3'], validators=[DataRequired()])
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()

    # Restore draft from session on page load
    if request.method == 'GET' and 'form_draft' in session:
        form.string1.data = session['form_draft']['string1']
        form.selectField.data = session['form_draft']['selectField']

    # Handle draft save requests (triggered via AJAX)
    if request.method == 'POST' and 'save_draft' in request.form:
        session['form_draft'] = {
            'string1': request.form['string1'],
            'selectField': request.form['selectField']
        }
        return 'Draft saved successfully!'

    # Handle final form submission
    if form.validate_on_submit():
        # Process your form data here (e.g., save to DB)
        session.pop('form_draft', None)  # Clear draft after submission
        return 'Form submitted!'

    return render_template('index.html', form=form)

Add this AJAX script to your template to auto-save drafts as the user types:

<script>
    const formFields = document.querySelectorAll('#string1, #selectField');
    formFields.forEach(field => {
        field.addEventListener('input', () => {
            const formData = new FormData();
            formData.append('string1', document.getElementById('string1').value);
            formData.append('selectField', document.getElementById('selectField').value);
            formData.append('save_draft', 'true');

            fetch('/', { method: 'POST', body: formData });
        });
    });
</script>

Pros: Data is stored server-side, more secure, persists across browser restarts (until session expires).
Cons: Requires server configuration, session data is temporary (default expires after browser closes).

Option 3: Persistent Drafts with a Database #

For long-term storage (e.g., users returning days later), save form drafts to a database. This works great if you have a user system.

First, set up Flask-SQLAlchemy:

pip install flask-sqlalchemy

Add a draft model to your app:

from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

db = SQLAlchemy(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///drafts.db'

class FormDraft(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer)  # Link to your User model if you have one
    string1 = db.Column(db.String(255))
    selectField = db.Column(db.String(255))
    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)

# Create tables (run once)
with app.app_context():
    db.create_all()

Update your view to save and load drafts:

@app.route('/save_draft', methods=['POST'])
def save_draft():
    string1 = request.form.get('string1')
    selectField = request.form.get('selectField')
    
    # Replace 1 with current_user.id if using Flask-Login
    draft = FormDraft.query.filter_by(user_id=1).first()
    if draft:
        draft.string1 = string1
        draft.selectField = selectField
    else:
        draft = FormDraft(user_id=1, string1=string1, selectField=selectField)
    
    db.session.add(draft)
    db.session.commit()
    return 'Draft saved!'

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    # Load latest draft for the user
    draft = FormDraft.query.filter_by(user_id=1).order_by(FormDraft.updated_at.desc()).first()
    if draft:
        form.string1.data = draft.string1
        form.selectField.data = draft.selectField

    if form.validate_on_submit():
        # Process form data
        # Optional: Delete draft after submission
        if draft:
            db.session.delete(draft)
            db.session.commit()
        return 'Form submitted!'

    return render_template('index.html', form=form)

Pros: Drafts persist indefinitely, accessible across devices if users log in.
Cons: Requires database setup, slightly more complex than the other options.

Which Should You Choose? #

• Start with localStorage if you want a quick, no-server-setup solution.
• Use Flask-Session if you need server-side security and temporary persistence.
• Go with the database approach if you need long-term draft storage or user-specific persistence.

内容的提问来源于stack exchange，提问作者Shaun Barney