Why Does Your Web Page Lose Data When Refreshed?

Congratulations! If you've followed our previous courses on HTML, CSS, and React, you should now have the ability to "create a beautiful website." You might build a fancy to-do list app that allows adding, deleting, and checking off tasks.

But when you share this webpage with a friend, they excitedly type "Buy milk tomorrow," then accidentally hit the browser's refresh button (F5)... Poof! All the entered data disappears!

Why does this happen? Because pure front-end web pages (HTML/JavaScript) are like a genius with "amnesia." They have strong computational power and can render gorgeous visuals, but their memory is only "short-term (stored in the browser's RAM)." The moment you close or refresh the page, its memory is instantly wiped clean.

If you want to build a real "production-grade application"—where users can register accounts, posts are visible worldwide, or shopping cart items persist until tomorrow—you need to equip this genius with a "long-term memory hard drive."

In the world of software engineering, this long-term memory hard drive is called a Database.

Meet the King of Relational Databases: PostgreSQL

There are many types of databases, just as there are sedans, sports cars, and trucks. In modern software development, the most mainstream and widely adopted by major companies (including Apple, Instagram, and Uber) is the Relational Database.

You can think of a relational database as an "extremely strict, error-proof super Excel spreadsheet."

And currently, the world's most popular and powerful open-source relational database is the star of this course: PostgreSQL (often affectionately called Postgres by engineers).

Why Choose PostgreSQL Over MySQL or MongoDB?

Strict Data Consistency: If you're building an e-commerce site, customer payments must never go wrong. Postgres offers the strictest protection for these types of "transactions."
Ultimate Scalability: It can store plain text, geographic coordinates (PostGIS), and even vector data (pgvector) needed for AI. This is why AI companies are all using Postgres!
The Choice of Vercel and Supabase: In modern serverless development workflows, Supabase—the largest cloud database provider—is built entirely on PostgreSQL.

SQL (Structured Query Language): The Magic Spell to Communicate with Databases

If a database is an impenetrable library, then SQL is the only language you can use to talk to the librarian.

All relational databases (whether Postgres, MySQL, or Oracle) understand this standardized language called SQL. It consists of English-like commands to "create, read, update, delete" data (engineers abbreviate this as CRUD).

Let’s look at some classic SQL examples:

1. Querying Data (Read / SELECT)

Suppose you want to find all members in the "users" table who are "older than 18" and retrieve their names and emails. In Excel, you’d open a filter, select the age column, and set it to "greater than 18." In SQL, you just chant this spell to the database:

SELECT name, email 
FROM users 
WHERE age > 18;

The database will filter millions of records in 0.01 seconds and return the results!

2. Inserting Data (Create / INSERT)

When a new user registers on your site, your backend program sends this command to the database:

INSERT INTO users (name, email, age) 
VALUES ('John Doe', 'john@example.com', 25);

3. Updating Data (Update / UPDATE)

If John Doe wants to change his name to "Johnny Doe":

UPDATE users 
SET name = 'Johnny Doe' 
WHERE email = 'john@example.com';

4. Deleting Data (Delete / DELETE)

If John Doe wants to delete his account (Note: In real-world applications, we rarely use DELETE; instead, we mark accounts as "deactivated"):

DELETE FROM users 
WHERE email = 'john@example.com';

In the Era of Vibe Coding, Do You Still Need to Memorize SQL?

At this point, you might feel anxious: "Oh no! I haven’t even mastered JavaScript, and now I have to learn a whole new SQL language?"

Relax—this is where Vibe Coding (Incantation Development) shines.

Modern AI (like ChatGPT and Claude) is the greatest SQL translator in the world. Because SQL has existed for 40 years, with billions of tutorials online, AI’s neural networks have mastered SQL to perfection.

You don’t need to memorize complex advanced syntax like JOIN, GROUP BY, or HAVING. You just need to:

Describe your "table structure" in plain language to the AI.
Tell the AI in plain language "what results you want."

【Behold This Incredible Vibe Prompt Example】 I have an orders table (fields: order_id, user_id, total_amount, order_date). I also have a users table (fields: user_id, name).

Please write a PostgreSQL query to: "Find the top 5 VIP members in 2024 whose total spending exceeds $10,000, and display their names and total spending, sorted from highest to lowest."

With this incantation, the AI will instantly generate complex JOIN and GROUP BY queries that even senior engineers would need time to craft:

SELECT u.name, SUM(o.total_amount) as total_spent
FROM users u
JOIN orders o ON u.user_id = o.user_id
WHERE EXTRACT(YEAR FROM o.order_date) = 2024
GROUP BY u.user_id, u.name
HAVING SUM(o.total_amount) > 10000
ORDER BY total_spent DESC
LIMIT 5;

Just copy this code, paste it into your database console, hit Enter, and the VIP report your boss wants appears instantly!

Ready for Battle: Free Cloud Database with Supabase

In the past, installing PostgreSQL on your computer was a painful process that could even crash your system. But now, we have Supabase—a powerful cloud platform offering free, one-click PostgreSQL databases.

In the next chapter, we’ll guide you step-by-step through signing up for Supabase and show you how to integrate it with Cursor AI to connect your React app to a real database, curing your webpage’s "amnesia" for good! Ready? Let’s dive in!