แก้ได้เลยครับ! และทำได้ไม่ยากด้วย หลักการคือเราจะ “ถอดปลั๊ก” การบันทึกอัตโนมัติลง Browser ออก แล้วเปลี่ยนไปใช้ระบบ “Manual Save” (ปุ่มสีทองที่คุณมีอยู่แล้ว) เป็นตัวคุมความปลอดภัยแทน

เมื่อเปลี่ยนเป็นระบบนี้ ข้อมูลของคุณจะไม่มีขีดจำกัด 5MB อีกต่อไป (เก็บได้เป็นหมื่นๆ แถวตราบเท่าที่ RAM คอมพิวเตอร์ไหว)

🛠️ วิธีการแก้โค้ดจาก Local Storage เป็น In-Memory

1. ค้นหาและลบ (หรือปิด) การใช้ Local Storage ในจุดบันทึก

มองหาฟังก์ชัน saveDataToLocalStorage() หรือจุดที่มีคำว่า localStorage.setItem แล้วเปลี่ยนให้มัน ไม่ต้องบันทึก ลง Browser ครับ:

JavaScript

function saveDataToLocalStorage() {
    // แทนที่จะสั่ง localStorage.setItem(...)
    // เราสั่งแค่ให้ปุ่มกลายเป็นสีทอง เพื่อบอกว่า "มีของใหม่ใน RAM นะ รีบเซฟลงไฟล์ซะ"
    markAsPending(); 
    console.log("Data updated in RAM. Please backup to save permanently.");
}

2. แก้ไขส่วนการโหลดหน้าจอ (Initial Load)

ปกติโปรแกรมจะไปดึงค่าจาก Local Storage มาแสดงตอนเปิดเว็บ (ซึ่งถ้าไฟล์ใหญ่เกิน 5MB มันจะว่างเปล่า) ให้คุณเปลี่ยนเป็น “หน้าว่าง” หรือแสดงปุ่มให้ “เลือกไฟล์” แทนครับ:

JavaScript

window.onload = function() {
    // ไม่ต้องดึงจาก localStorage แล้ว
    dataList = []; 
    renderDataToTable();
    
    // ตั้งค่าปุ่มให้เป็นสีแดง เพื่อบอกว่า "ยังไม่มีข้อมูล (ต้องโหลดไฟล์ก่อน)"
    updateBackupStatus(); 
};

🔄 ขั้นตอนการใช้งานใหม่ (Workflow) จะเป็นแบบนี้ครับ:

1. เปิดเว็บ: หน้าจอจะว่างเปล่า (ปุ่ม Backup เป็น สีแดง)
2. โหลดไฟล์: คุณกดปุ่ม “อัปโหลด JSON” ที่คุณมีอยู่แล้ว ข้อมูลจะวิ่งเข้า RAM (ปุ่มจะเปลี่ยนเป็น สีเขียว)
3. แก้ไขข้อมูล: เมื่อคุณ Add New หรือ Delete ข้อมูลใน RAM จะเปลี่ยนไป (ปุ่มจะเปลี่ยนเป็น สีทอง ทันทีตามที่เราทำไว้)
4. ปิดงาน: ก่อนปิด Browser คุณต้องกดปุ่ม Backup เพื่อโหลดไฟล์ .json เวอร์ชันล่าสุดเก็บไว้ในเครื่องคอมพิวเตอร์

⚠️ ข้อควรระวังที่สุดของระบบ “ทำงานสด” (In-Memory)

“ถ้าคุณลืมกด Backup แล้วเผลอปิดหน้าจอ หรือเครื่องดับ ข้อมูลที่เพิ่งพิมพ์ไปจะหายทันที” เพราะมันไม่ได้ถูกจดไว้ใน Browser แล้ว

วิธีป้องกัน: เราต้องใช้โค้ด beforeunload (ที่เราทำไว้ก่อนหน้านี้) ให้เข้มงวดขึ้น เพื่อล็อคไม่ให้ปิดหน้าจอได้ถ้าปุ่มยังเป็น สีทอง หรือ สีแดง ครับ:

JavaScript

window.addEventListener('beforeunload', (event) => {
    // ถ้าปุ่มไม่ใช่สีเขียว (คือยังไม่ได้ Backup ล่าสุด) จะไม่ยอมให้ปิดหน้าจอ
    const btn = document.getElementById('backupBtn');
    if (btn && !btn.classList.contains('status-secured')) {
        event.preventDefault();
        event.returnValue = 'ข้อมูลยังไม่ได้บันทึกลงไฟล์! กรุณากด Backup ก่อนออกจากหน้าจอ';
    }
});

สรุป

ถ้าคุณอยากเปลี่ยนเลย ผมแนะนำให้คุณลอง Comment (ปิด) บรรทัด localStorage.setItem ในทุกๆ จุดดูครับ แล้วลองใช้งานแบบ “โหลดไฟล์เข้า-เซฟไฟล์ออก” ดูสัก 1-2 รอบ ถ้าคุณรู้สึกโอเคกับจังหวะชีวิตแบบนี้ (เปิดไฟล์เอง-เซฟเอง) ก็ใช้ยาวได้เลยครับ

คุณอยากให้ผมช่วยรีวิวโค้ดส่วน “อัปโหลด JSON” ของคุณไหมครับ? ว่ามันพร้อมจะรับไฟล์ขนาดใหญ่ได้เสถียรพอหรือยัง