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

HTML5 การใช้งาน Web Storage API

Web Storage API ใน HTML5 เป็นกลไกในการเก็บข้อมูลฝั่งผู้ใช้ (Client-Side) โดยไม่ต้องใช้คุกกี้ ช่วยให้สามารถเก็บข้อมูลได้มากขึ้นและรวดเร็วยิ่งขึ้น ซึ่งมีอยู่ 2 รูปแบบหลักคือ LocalStorage และ SessionStorage โดยทั้งสองมีการทำงานที่คล้ายกัน แต่มีความแตกต่างที่สำคัญในการจัดการอายุของข้อมูล

LocalStorage

  • ข้อมูลใน LocalStorage จะถูกเก็บถาวรจนกว่าจะถูกลบโดยผู้ใช้หรือโดยโค้ด (แม้ว่าจะปิดและเปิดเบราว์เซอร์ใหม่ ข้อมูลก็ยังคงอยู่)
  • เหมาะสำหรับการเก็บข้อมูลที่ต้องการใช้งานนานๆ เช่น การตั้งค่าของผู้ใช้ หรือข้อมูลที่ไม่จำเป็นต้องหมดอายุเร็ว

การใช้งาน LocalStorage

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage Example</title>
</head>
<body>
    <h1>ตัวอย่างการใช้ LocalStorage</h1>
    <input type="text" id="inputValue" placeholder="กรอกข้อมูล...">
    <button onclick="saveData()">บันทึกข้อมูล</button>
    <button onclick="getData()">แสดงข้อมูล</button>
    <button onclick="deleteData()">ลบข้อมูล</button>

    <script>
        function saveData() {
            let value = document.getElementById('inputValue').value;
            localStorage.setItem('myData', value);
            alert('ข้อมูลถูกบันทึกแล้ว');
        }

        function getData() {
            let storedData = localStorage.getItem('myData');
            if (storedData) {
                alert('ข้อมูลที่บันทึกคือ: ' + storedData);
            } else {
                alert('ไม่มีข้อมูลที่ถูกบันทึก');
            }
        }

        function deleteData() {
            localStorage.removeItem('myData');
            alert('ข้อมูลถูกลบแล้ว');
        }
    </script>
</body>
</html>

การอธิบายการใช้งาน

  • localStorage.setItem(key, value) ใช้สำหรับการบันทึกข้อมูล
  • localStorage.getItem(key) ใช้สำหรับการเรียกดูข้อมูล
  • localStorage.removeItem(key) ใช้สำหรับการลบข้อมูล

SessionStorage

  • ข้อมูลใน SessionStorage จะถูกเก็บเพียงชั่วคราวจนกว่าแท็บหรือหน้าต่างเบราว์เซอร์จะถูกปิด เมื่อปิดแล้ว ข้อมูลจะถูกลบทันที
  • เหมาะสำหรับการเก็บข้อมูลชั่วคราวในระหว่างที่ผู้ใช้ทำงานกับแท็บนั้นๆ เช่น ข้อมูลฟอร์มที่กรอกระหว่างการใช้งานหน้าเว็บเดียว

การใช้งาน SessionStorage

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SessionStorage Example</title>
</head>
<body>
    <h1>ตัวอย่างการใช้ SessionStorage</h1>
    <input type="text" id="inputValue" placeholder="กรอกข้อมูล...">
    <button onclick="saveData()">บันทึกข้อมูล</button>
    <button onclick="getData()">แสดงข้อมูล</button>
    <button onclick="deleteData()">ลบข้อมูล</button>

    <script>
        function saveData() {
            let value = document.getElementById('inputValue').value;
            sessionStorage.setItem('myData', value);
            alert('ข้อมูลถูกบันทึกแล้วใน Session');
        }

        function getData() {
            let storedData = sessionStorage.getItem('myData');
            if (storedData) {
                alert('ข้อมูลที่บันทึกใน Session คือ: ' + storedData);
            } else {
                alert('ไม่มีข้อมูลที่บันทึกใน Session');
            }
        }

        function deleteData() {
            sessionStorage.removeItem('myData');
            alert('ข้อมูลใน Session ถูกลบแล้ว');
        }
    </script>
</body>
</html>

การอธิบายการใช้งาน

  • sessionStorage.setItem(key, value) ใช้สำหรับบันทึกข้อมูลใน session
  • sessionStorage.getItem(key) ใช้สำหรับการเรียกดูข้อมูลจาก session
  • sessionStorage.removeItem(key) ใช้สำหรับการลบข้อมูลจาก session

การเปรียบเทียบระหว่าง LocalStorage และ SessionStorage

คุณสมบัติLocalStorageSessionStorage
อายุของข้อมูลถาวร จนกว่าจะถูกลบด้วยโค้ดหรือผู้ใช้ชั่วคราว จนกว่าแท็บจะถูกปิด
ขนาดข้อมูลที่เก็บได้โดยทั่วไปอยู่ที่ 5MB ต่อโดเมน5MB ต่อโดเมนในแต่ละ session
การแบ่งแยกข้อมูลข้อมูลถูกแบ่งตามโดเมนข้อมูลถูกแบ่งตามโดเมนและแท็บ
การใช้งานการเก็บข้อมูลที่ต้องการใช้ในระยะยาวการเก็บข้อมูลชั่วคราวใน session

การใช้งาน JSON กับ Web Storage

เนื่องจาก Web Storage เก็บข้อมูลในรูปแบบของสตริงเท่านั้น หากต้องการเก็บข้อมูลเชิงซ้อนเช่นออบเจ็กต์ (Object) จำเป็นต้องแปลงข้อมูลเป็น JSON

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

JavaScript
let user = {
    name: 'John Doe',
    age: 30,
    occupation: 'Developer'
};

// แปลงออบเจ็กต์เป็น JSON string และบันทึกใน LocalStorage
localStorage.setItem('user', JSON.stringify(user));

// เรียกข้อมูลออกมาและแปลงกลับเป็นออบเจ็กต์
let retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name);  // Output: John Doe

การประยุกต์ใช้งาน Web Storage

  • การเก็บสถานะการล็อกอินของผู้ใช้
  • การบันทึกการตั้งค่าหรือธีมที่ผู้ใช้เลือก
  • การเก็บข้อมูลการซื้อสินค้าของผู้ใช้ในแอปพลิเคชัน e-commerce
  • การเก็บข้อมูลฟอร์มที่ยังกรอกไม่เสร็จเพื่อเรียกกลับมาใช้ใหม่ภายหลัง
Tags
แชร์เรื่องนี้

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