พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onstorage Event Attribute

ใน HTML5, onstorage เป็น Event Attribute ที่ทำงานเมื่อมีการเปลี่ยนแปลงข้อมูลใน Web Storage (localStorage หรือ sessionStorage) ในหน้าต่างเบราว์เซอร์อื่น ๆ ที่กำลังเปิดเว็บไซต์เดียวกันนั้นอยู่ ซึ่งจะถูกเรียกใช้เมื่อมีการเปลี่ยนแปลงข้อมูลใน storage ที่เกิดจากหน้าต่างเบราว์เซอร์อื่นๆ (ไม่ใช่หน้าปัจจุบัน)

วิธีการใช้งาน onstorage

1. การใช้งานผ่าน HTML Attribute

สามารถใช้งาน onstorage เป็น attribute ใน HTML ของแท็ก <body> หรือแท็กอื่น ๆ ได้ เช่น

HTML
<body onstorage="alert('Storage updated!')">
    <!-- Page content -->
</body>

ในตัวอย่างนี้ ถ้ามีการเปลี่ยนแปลงข้อมูลใน localStorage หรือ sessionStorage จากหน้าต่างเบราว์เซอร์อื่น หน้าเว็บนี้จะแสดงการแจ้งเตือนว่า “Storage updated!”

2. การใช้งานผ่าน JavaScript

สามารถผูกเหตุการณ์ storage event ผ่าน JavaScript เพื่อจับการเปลี่ยนแปลงข้อมูลได้เช่นกัน

JavaScript
window.addEventListener('storage', function(event) {
    console.log('Storage key changed:', event.key);
    console.log('New value:', event.newValue);
    console.log('Old value:', event.oldValue);
    console.log('Storage area:', event.storageArea);
    console.log('URL:', event.url);
});

ในโค้ดนี้จะฟัง event การเปลี่ยนแปลงใน storage และจะแสดงรายละเอียดเกี่ยวกับข้อมูลที่เปลี่ยนแปลงใน console ดังนี้:

  • event.key : ชื่อของ key ที่มีการเปลี่ยนแปลง
  • event.newValue : ค่าที่ถูกตั้งใหม่
  • event.oldValue : ค่าที่ถูกเปลี่ยนแปลงไป
  • event.storageArea : พื้นที่จัดเก็บที่เปลี่ยนแปลง (localStorage หรือ sessionStorage)
  • event.url : URL ของหน้าต่างที่ทำการเปลี่ยนแปลง

ตัวอย่างการใช้งาน

การซิงค์ข้อมูลระหว่างหลายหน้าต่าง

สมมติว่าเรามีหน้าเว็บที่เปิดอยู่ 2 หน้า ถ้าผู้ใช้ทำการเปลี่ยนแปลงข้อมูลในหน้าหนึ่ง เราต้องการให้ข้อมูลนั้นอัปเดตไปยังหน้าอื่นๆ โดยไม่ต้องโหลดหน้าเว็บใหม่ ตัวอย่างเช่น

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sync Across Tabs</title>
</head>
<body>
    <h1>Current Data: <span id="current-data"></span></h1>
    <button id="update-storage">Update Storage</button>

    <script>
        // แสดงข้อมูลที่จัดเก็บไว้ใน localStorage
        document.getElementById('current-data').textContent = localStorage.getItem('myData') || 'No data';

        // อัปเดตข้อมูลใน localStorage เมื่อกดปุ่ม
        document.getElementById('update-storage').addEventListener('click', function() {
            const newData = new Date().toLocaleTimeString();
            localStorage.setItem('myData', newData);
            document.getElementById('current-data').textContent = newData;
        });

        // ฟัง event storage เพื่อซิงค์ข้อมูลในหน้าต่างอื่น
        window.addEventListener('storage', function(event) {
            if (event.key === 'myData') {
                document.getElementById('current-data').textContent = event.newValue;
            }
        });
    </script>
</body>
</html>

ในตัวอย่างนี้ ถ้าผู้ใช้กดปุ่มในหน้าต่างใด ๆ จะอัปเดตค่าของ myData ใน localStorage และค่าในหน้าต่างอื่นที่เปิดอยู่จะเปลี่ยนตามไปด้วยทันที

การเก็บข้อมูล session แบบชั่วคราว

ในกรณีที่ต้องการใช้ sessionStorage เพื่อติดตามข้อมูลในเซสชั่นเดียวกัน แต่ต้องการให้ข้อมูลซิงค์ระหว่างหน้าต่างหลายๆ แท็บ

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session Storage Example</title>
</head>
<body>
    <h1>Session Data: <span id="session-data"></span></h1>
    <button id="update-session-storage">Update Session Storage</button>

    <script>
        // แสดงข้อมูลที่จัดเก็บไว้ใน sessionStorage
        document.getElementById('session-data').textContent = sessionStorage.getItem('sessionData') || 'No data';

        // อัปเดตข้อมูลใน sessionStorage เมื่อกดปุ่ม
        document.getElementById('update-session-storage').addEventListener('click', function() {
            const sessionData = new Date().toLocaleTimeString();
            sessionStorage.setItem('sessionData', sessionData);
            document.getElementById('session-data').textContent = sessionData;
        });

        // ฟัง event storage เพื่อซิงค์ข้อมูลในหน้าต่างอื่น
        window.addEventListener('storage', function(event) {
            if (event.key === 'sessionData') {
                document.getElementById('session-data').textContent = event.newValue;
            }
        });
    </script>
</body>
</html>

ในตัวอย่างนี้ ข้อมูลจะถูกเก็บใน sessionStorage แต่เมื่อหน้าต่างหนึ่งทำการอัปเดต session storage ข้อมูลในหน้าต่างอื่นก็จะอัปเดตตามไปด้วย

สรุป

onstorage ใน HTML5 เป็นเครื่องมือที่ช่วยในการจัดการและซิงค์ข้อมูลระหว่างหลายหน้าต่างเบราว์เซอร์ผ่านการใช้ localStorage หรือ sessionStorage ซึ่งสามารถนำไปประยุกต์ใช้งานในหลากหลายรูปแบบ เช่น การซิงค์ข้อมูลระหว่างหน้าต่าง หรือการแสดงข้อมูลที่อัปเดตแบบเรียลไทม์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ