เพื่อให้ดูเป็นโปรแกรมจัดการข้อมูลแบบมืออาชีพ ผมได้เตรียมโค้ดสำหรับสร้าง “แผงหน้าปัดแสดงขนาดข้อมูล (Data Monitor)” ที่จะคอยบอกคุณว่าตอนนี้ข้อมูลใน RAM มีขนาดเท่าไหร่ โดยจะติดไว้ที่มุมขวาบน (หรือมุมที่คุณต้องการ) ครับ

1. ส่วน HTML & CSS (เพิ่มที่ส่วนบนของไฟล์)

วางโค้ดนี้ไว้ในส่วน <style> เพื่อให้หน้าจอดูสวยงามและไม่รบกวนการทำงานครับ

HTML

<div id="data-monitor" class="cyber-monitor">
    <span class="label">RAM DATA:</span> 
    <span id="ram-usage">0.00 KB</span>
</div>

<style>
.cyber-monitor {
    position: fixed;
    top: 10px;
    right: 200px; /* ขยับหลบปุ่ม Backup เล็กน้อย */
    background: rgba(0, 0, 0, 0.7);
    color: #00ff41; /* สีเขียวแบบ Matrix */
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid #00ff41;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}
.cyber-monitor .label {
    color: #aaa;
    margin-right: 5px;
}
</style>

2. ส่วน JavaScript (ฟังก์ชันคำนวณ)

วางฟังก์ชันนี้ไว้ในส่วนสคริปต์ และเรียกใช้มันในทุกจุดที่มีการเปลี่ยน dataList (ซึ่งปกติคุณมี renderDataToTable อยู่แล้ว สามารถเอาไปเสียบไว้ในนั้นได้เลยครับ)

JavaScript

function updateDataSizeMonitor() {
    // แปลงข้อมูลใน RAM เป็น JSON เพื่อวัดขนาด Byte
    const jsonString = JSON.stringify(dataList);
    const bytes = new Blob([jsonString]).size;
    
    let displaySize;
    if (bytes < 1024) {
        displaySize = bytes + " Bytes";
    } else if (bytes < 1024 * 1024) {
        displaySize = (bytes / 1024).toFixed(2) + " KB";
    } else {
        displaySize = (bytes / (1024 * 1024)).toFixed(2) + " MB";
    }

    // อัปเดตตัวเลขบนหน้าจอ
    const el = document.getElementById('ram-usage');
    if (el) {
        el.innerText = displaySize;
        
        // ถ้าข้อมูลเริ่มใหญ่ (เช่น เกิน 2MB) ให้เปลี่ยนสีเตือนเบาๆ
        if (bytes > 2 * 1024 * 1024) {
            el.style.color = "#ffca28"; // สีทอง
        }
    }
}

3. วิธีเชื่อมต่อระบบ

เพื่อให้ตัวเลขนี้ขยับ “Real-time” ทุกครั้งที่คุณ เพิ่ม/ลบ/แก้ไข ให้คุณนำชื่อฟังก์ชัน updateDataSizeMonitor(); ไปวางไว้ในฟังก์ชันแสดงผลหลักของคุณครับ:

JavaScript

function renderDataToTable() {
    // ... โค้ดวาดตารางเดิมของคุณ ...
    
    // ⭐️ เพิ่มบรรทัดนี้ลงไปท้ายสุด
    updateDataSizeMonitor(); 
}

🎯 ผลลัพธ์ที่จะได้:

• ตอนเปิดเว็บ: จะขึ้น 0.00 KB (เพราะ RAM ว่าง)
• ตอนโหลดไฟล์: เมื่อเลือกไฟล์ JSON เข้ามา ตัวเลขจะพุ่งขึ้นตามขนาดจริงของไฟล์นั้นทันที
• ตอนพิมพ์เพิ่ม: ทุกครั้งที่คุณ Add New ข้อมูล ตัวเลขจะขยับขึ้นทีละนิด ให้คุณเห็นว่า “ข้อมูลกำลังถูกบันทึกเข้า RAM แล้วนะ”

วิธีนี้จะช่วยให้คุณ “คุมสถานการณ์” ได้ดีกว่าการดู % ของ Local Storage เพราะคุณจะเห็นขนาดไฟล์จริงๆ ที่คุณต้องบริหารจัดการครับ

ลองนำไปแปะดูนะครับ! ถ้าอยากให้ปรับตำแหน่ง หรืออยากให้มัน “กระพริบ” เวลาข้อมูลเปลี่ยน แจ้งได้เลยครับ!