How cookies work in HTTP in Flask - Visual Walkthrough

Concept Flow - How cookies work in HTTP

Client sends HTTP request

↓

Server checks for cookies

↓

Server sends HTTP response with Set-Cookie header

↓

Client stores cookie

↓

Next client request includes Cookie header

↓

Server reads cookie and customizes response

This flow shows how a client and server exchange cookies via HTTP headers to remember information across requests.

Execution Sample

Flask

from flask import Flask, request, make_response
app = Flask(__name__)

@app.route('/')
def index():
    username = request.cookies.get('username')
    resp = make_response(f'Hello {username}')
    resp.set_cookie('username', 'Alice')
    return resp

This Flask code sets a cookie named 'username' and reads it on subsequent requests to greet the user.

Execution Table

Step	Action	Request Headers	Response Headers	Cookie Stored	Output
1	Client sends first request	No Cookie header	Set-Cookie: username=Alice	username=Alice	Hello None
2	Client sends second request	Cookie: username=Alice	Set-Cookie: username=Alice	username=Alice	Hello Alice
3	Client sends third request	Cookie: username=Alice	Set-Cookie: username=Alice	username=Alice	Hello Alice
4	No more requests	N/A	N/A	username=Alice	Session continues with cookie

💡 Execution stops when client stops sending requests or closes session.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
username cookie	None	Alice	Alice	Alice	Alice
request.cookies.get('username')	None	None	Alice	Alice	Alice

Key Moments - 3 Insights

Why does the first response greet with 'Hello None'?

At step 1 in the execution_table, the client has not sent any cookie yet, so request.cookies.get('username') returns None.

How does the client remember the cookie for the next request?

After step 1, the response includes 'Set-Cookie: username=Alice', so the client stores this cookie and sends it in the next request header as shown in step 2.

Why does the server keep sending Set-Cookie header on every response?

In this example, the server sets the cookie on every response to refresh or update it, as seen in response headers at steps 1, 2, and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'username' cookie after step 1?

A Bob

B None

C Alice

D Empty string

💡 Hint

Check the 'Cookie Stored' column at step 1 in the execution_table.

At which step does the client start sending the cookie back to the server?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Request Headers' column to see when 'Cookie: username=Alice' appears.

If the server did not send 'Set-Cookie' header in the response, what would happen to the cookie?

A Client would keep sending the old cookie

B Client would delete the cookie immediately

C Client would never send any cookie

D Server would receive empty cookie

💡 Hint

Refer to how cookies persist on the client side unless expired or deleted.

Concept Snapshot

HTTP cookies are small data sent by server in 'Set-Cookie' header.
Client stores cookies and sends them back in 'Cookie' header.
Server reads cookies to remember user info across requests.
In Flask, use request.cookies to read and response.set_cookie to set cookies.
Cookies enable session-like behavior over stateless HTTP.

Full Transcript

This visual execution shows how HTTP cookies work between a client and a Flask server. Initially, the client sends a request without cookies. The server responds with a 'Set-Cookie' header to store a cookie named 'username' with value 'Alice'. The client saves this cookie and includes it in the 'Cookie' header of the next request. The server reads this cookie and uses it to personalize the response. This cycle repeats, demonstrating how cookies help maintain state in HTTP. The execution table tracks headers and cookie values step-by-step, while the variable tracker shows how the cookie value changes from None to 'Alice'. Key moments clarify why the first greeting lacks a username and how cookies persist. The quiz tests understanding of cookie storage and transmission. This example uses Flask's request.cookies and response.set_cookie methods to handle cookies simply and clearly.