ในโค้ดของทั้ง index.html และ admin.html ที่ส่งมา ไม่มีการเปลี่ยนไปใช้หรืออ่านจาก Local Storage เลยครับ (ไม่มีคำสั่ง localStorage อยู่ในไฟล์เลย) ระบบทั้งหมดร้อยเปอร์เซ็นต์ยังคงยิง fetch() ไปดึงข้อมูลสดๆ จากไฟล์ api.php บนเซิร์ฟเวอร์อยู่เหมือนเดิมครับ

สาเหตุที่ลบไฟล์ db.json บนเซิร์ฟเวอร์ไปแล้ว แต่ข้อมูลเก่าก็ยังแสดงอยู่ เกิดจากสาเหตุดังนี้ครับ:

1. แคชของเบราว์เซอร์ (Browser / HTTP Cache)

นี่คือสาเหตุหลักครับ เมื่อเบราว์เซอร์เรียกใช้งานคำสั่ง GET ผ่าน api.php ไปแล้วครั้งหนึ่ง เบราว์เซอร์ (โดยเฉพาะ Google Chrome หรือเบราว์เซอร์บนมือถือ) จะทำการจดจำข้อมูล (Cache) ชุดนั้นเอาไว้ในเครื่องคอมพิวเตอร์หรือมือถือของคุณ เพื่อให้ครั้งต่อไปเปิดหน้าเว็บได้เร็วขึ้น

• ผลลัพธ์คือ: แม้คุณจะลบไฟล์ db.json ทิ้งไปแล้ว แต่พอเปิดหน้าเว็บหรือกดค้นหา เบราว์เซอร์ไม่ได้วิ่งไปถามเซิร์ฟเวอร์จริงๆ แต่มันดันเอาข้อมูลเก่าที่มันแอบเซฟไว้ในเครื่องของคุณมาแสดงผลแทน ทำให้รู้สึกเหมือนข้อมูลไม่ยอมหายไปไหน

2. ระบบสร้างไฟล์เปล่ากลับมาใหม่อัตโนมัติ

ในฟังก์ชัน safeReadDB() ของไฟล์ api.php มีการเขียนดักไว้ว่า หากไม่พบไฟล์ db.json ระบบจะสร้างไฟล์ db.json เปล่าขึ้นมาใหม่ทันที เพื่อป้องกันไม่ให้ระบบพัง ซึ่งถ้าเบราว์เซอร์ไม่ติดแคช มันควรจะแสดงตารางว่างเปล่า แต่ถ้ายังเห็นรายชื่อครบถ้วน แปลว่าเกิดจากข้อ 1 (ติดแคชเบราว์เซอร์) แน่นอนครับ

🛠️ วิธีการทดสอบและแก้ไข

วิธีที่ 1: บังคับเคลียร์แคชที่ฝั่งผู้ใช้งาน (เพื่อทดสอบดูผลลัพธ์จริง)

• บนคอมพิวเตอร์ (Windows): ให้กดปุ่ม Ctrl + F5 หรือ Ctrl + Shift + R บนคีย์บอร์ดพร้อมกัน (เป็นการทำ Hard Refresh เพื่อบังคับให้เบราว์เซอร์ละทิ้งแคชแล้วไปดึงไฟล์จากเซิร์ฟเวอร์ใหม่)
• บนคอมพิวเตอร์ (Mac): ให้กดปุ่ม Cmd + Shift + R
• ทดสอบผ่านโหมดไม่ระบุตัวตน: ลองเปิดลิงก์ผ่าน Incognito Mode / Private Window ข้อมูลเก่าที่เคยแคชไว้จะไม่ตามมาครับ

วิธีที่ 2: แก้ไขที่โค้ด api.php เพื่อป้องกันไม่ให้เบราว์เซอร์แอบแคชข้อมูล (แนะนำให้ทำถาวร)

เพื่อให้ระบบหลังบ้านและหน้าค้นหาแสดงผลถูกต้องตรงกับไฟล์ db.json เสมอ ให้เพิ่มคำสั่งห้ามแคช (No-Cache Headers) ไว้ที่บรรทัดบนสุดของไฟล์ api.php ดังนี้ครับ:

PHP

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// 🟢 เพิ่ม 3 บรรทัดนี้เพื่อสั่งห้ามเบราว์เซอร์เก็บแคชข้อมูลเด็ดขาด
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// --- 0. การตั้งค่าความปลอดภัย ---
$db_path = "db.json"; 
// ... โค้ดส่วนที่เหลือเหมือนเดิม ...

วิธีที่ 3: แก้ไขที่ฝั่ง JavaScript เพื่อทำ Cache Busting (ทำลายแคชด้วย URL)

คุณสามารถปรับเปลี่ยนโค้ดฝั่ง JavaScript ตอนที่สั่ง fetch ใน admin.html และ index.html โดยเติมพารามิเตอร์เวลา _=${Date.now()} ต่อท้าย เพื่อให้เบราว์เซอร์มองว่าเป็น URL ใหม่ตลอดเวลาและยอมไปดึงข้อมูลจริงจากเซิร์ฟเวอร์ครับ

• ในหน้า admin.html (ฟังก์ชัน loadClientsFromServer):JavaScriptfunction loadClientsFromServer() { // เติม &_=${Date.now()} ต่อท้าย URL เพื่อทำลายแคช fetch(`api.php?scope=admin&token=${adminToken}&_=${Date.now()}`) .then(res => res.json()) .then(data => { allClients = data; renderTable(); }) .catch(() => showToast("❌ ไม่สามารถติดต่อ API แอดมินได้", true)); }
• ในหน้า index.html (ฟังก์ชัน fetchClientData):JavaScriptfunction fetchClientData() { const phone = document.getElementById('search-phone').value.trim(); if (!phone) return; // เติม &_=${Date.now()} ต่อท้าย URL เพื่อทำลายแคชเช่นกัน fetch(`api.php?phone=${phone}&_=${Date.now()}`) .then(res => { // ... โค้ดส่วนอื่นๆ เหมือนเดิม ...

เมื่อเพิ่ม Headers ป้องกันแคชหรือใส่ Parameter สุ่มลงไปแล้ว หลังจากนี้เมื่อคุณลบไฟล์ db.json หรืออัปเดตข้อมูลผ่านหน้าแอดมิน หน้าเว็บทั้งสองหน้าจะแสดงผลตรงตามไฟล์ฐานข้อมูลจริงในทันทีโดยไม่มีอาการนิ่งค้างหรือจำข้อมูลเก่าอีกต่อไปครับ