Web Storage Tools

Web Storage Tools: A Practical Guide (with Python Examples)

When you build a website or web app, you often need to store data — either on the user's browser (client-side) or on your server (server-side). Below is a breakdown of the most common web storage tools, what they're good for, and how to work with them using Python where relevant.

1. Cookies

Cookies are small pieces of data stored in the browser and sent back to the server with every request. They're commonly used for sessions, authentication tokens, and simple preferences.

Setting a cookie in Python (Flask):

from flask import Flask, make_response

app = Flask(__name__)

@app.route("/set-cookie")
def set_cookie():
    resp = make_response("Cookie has been set!")
    resp.set_cookie("username", "JohnDoe", max_age=60*60*24)  # 1 day
    return resp

@app.route("/get-cookie")
def get_cookie():
    username = request.cookies.get("username")
    return f"Hello, {username}"

Key limits: ~4KB per cookie, sent with every HTTP request (adds overhead), and should never store sensitive data unencrypted.

2. localStorage

localStorage is a browser API that stores key-value data with no expiration date. It's purely client-side — Python running on your server can't read or write it directly, but your server can render JavaScript that does.

<script>
  // Save data
  localStorage.setItem("theme", "dark");

  // Read data
  const theme = localStorage.getItem("theme");

  // Remove data
  localStorage.removeItem("theme");
</script>

Good for: user preferences, theme settings, small cached data that should persist across browser sessions (~5-10MB limit, varies by browser).

3. sessionStorage

Same API as localStorage, but data is cleared as soon as the browser tab is closed.

<script>
  sessionStorage.setItem("formStep", "2");
  const step = sessionStorage.getItem("formStep");
</script>

Good for: multi-step forms, temporary UI state, data that shouldn't survive a page reload in a new tab.

4. IndexedDB

A more powerful, low-level browser database for storing large amounts of structured data (think: objects, files, offline app data). It's overkill for simple key-value pairs but essential for offline-first apps.

<script>
  const request = indexedDB.open("MyDatabase", 1);

  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    db.createObjectStore("notes", { keyPath: "id" });
  };

  request.onsuccess = (event) => {
    const db = event.target.result;
    const tx = db.transaction("notes", "readwrite");
    tx.objectStore("notes").add({ id: 1, text: "Hello IndexedDB" });
  };
</script>

5. Server-Side Storage with Python (Sessions)

Instead of trusting the client, many apps store session data on the server and just send the user a session ID cookie. Flask's built-in session object does this for you automatically.

from flask import Flask, session

app = Flask(__name__)
app.secret_key = "replace-with-a-real-secret-key"

@app.route("/login")
def login():
    session["user"] = "JohnDoe"
    return "Logged in!"

@app.route("/profile")
def profile():
    user = session.get("user")
    return f"Welcome back, {user}"

Quick Comparison

Tool	Location	Persistence	Size Limit	Accessible from Python?
Cookies	Browser + sent to server	Configurable (expires)	~4KB	Yes (server sets/reads)
localStorage	Browser only	Until manually cleared	~5-10MB	No (JS only)
sessionStorage	Browser only	Until tab closes	~5-10MB	No (JS only)
IndexedDB	Browser only	Until manually cleared	Large (hundreds of MB+)	No (JS only)
Flask Session	Server (or signed cookie)	Configurable	Depends on backend	Yes (Python-native)

Which One Should You Use?

Storing a login/session token securely? → Cookies + server-side session (Flask)
Remembering UI preferences like dark mode? → localStorage
Temporary data for one tab session (like a form draft)? → sessionStorage
Offline app data, large structured datasets? → IndexedDB

That's the full picture of client-side vs. server-side (Python) storage tools — pick the right one based on how long the data needs to live and who needs to access it.

mathclasstutor

Web Storage Tools