HTML5 Web Storage (LocalStorage และ SessionStorage)

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้ HTML5 Geolocation API เพื่อเข้าถึงข้อมูลตำแหน่งของผู้ใช้ ในบทนี้ เราจะมาสำรวจอีกหนึ่งฟีเจอร์ที่ทรงพลังของ HTML5 ซึ่งก็คือ Web Storage ซึ่งเป็นกลไกสำหรับจัดเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้โดยตรง ทำให้เราสามารถสร้างเว็บแอปพลิเคชันที่สามารถทำงานแบบออฟไลน์ หรือเก็บข้อมูลผู้ใช้ระหว่างเซสชันได้

Web Storage คืออะไร?

Web Storage เป็น API ที่อนุญาตให้เว็บแอปพลิเคชันจัดเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้ ข้อมูลนี้จะถูกจัดเก็บเป็นคู่ key-value ซึ่งคล้ายกับการทำงานของ cookies แต่มีข้อดีกว่าหลายประการ เช่น ขนาดพื้นที่จัดเก็บที่ใหญ่กว่า (5-10MB ต่อโดเมน) และประสิทธิภาพที่ดีกว่า

HTML5 Web Storage มีสองประเภทหลักๆ คือ LocalStorage และ SessionStorage ซึ่งมีความแตกต่างกันในเรื่องระยะเวลาการเก็บรักษาข้อมูล:

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

ความแตกต่างระหว่าง LocalStorage และ SessionStorage

ตารางสรุปความแตกต่างระหว่าง LocalStorage และ SessionStorage:

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

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

Web Storage API มี methods หลักๆ 4 ตัวที่ใช้ในการจัดการข้อมูล:

• `setItem(key, value)`: ใช้สำหรับบันทึกข้อมูล โดยระบุ key และ value ที่ต้องการจัดเก็บ
• `getItem(key)`: ใช้สำหรับดึงข้อมูล โดยระบุ key ที่ต้องการดึงข้อมูล
• `removeItem(key)`: ใช้สำหรับลบข้อมูล โดยระบุ key ที่ต้องการลบข้อมูล
• `clear()`: ใช้สำหรับลบข้อมูลทั้งหมดที่จัดเก็บไว้ใน LocalStorage หรือ SessionStorage

การบันทึกข้อมูลด้วย `localStorage.setItem()` และ `sessionStorage.setItem()`

Method `setItem()` ใช้สำหรับบันทึกข้อมูลใน LocalStorage หรือ SessionStorage โดยต้องระบุ key และ value ที่ต้องการจัดเก็บ Value จะถูกแปลงเป็น string โดยอัตโนมัติ

ตัวอย่างการบันทึกข้อมูลใน LocalStorage:

localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('theme', 'dark');

ตัวอย่างการบันทึกข้อมูลใน SessionStorage:

sessionStorage.setItem('cartItems', JSON.stringify(['Product1', 'Product2']));
sessionStorage.setItem('isLoggedIn', 'true');

คำอธิบาย:

• ในตัวอย่าง LocalStorage เราบันทึกชื่อผู้ใช้และธีมที่เลือก
• ในตัวอย่าง SessionStorage เราบันทึกข้อมูลตะกร้าสินค้า (แปลงเป็น JSON string) และสถานะการเข้าสู่ระบบ

การดึงข้อมูลด้วย `localStorage.getItem()` และ `sessionStorage.getItem()`

Method `getItem()` ใช้สำหรับดึงข้อมูลจาก LocalStorage หรือ SessionStorage โดยต้องระบุ key ที่ต้องการดึงข้อมูล Method นี้จะคืนค่าเป็น string หรือ null หาก key นั้นไม่มีอยู่

ตัวอย่างการดึงข้อมูลจาก LocalStorage:

const username = localStorage.getItem('username');
const theme = localStorage.getItem('theme');

console.log('Username:', username); // Output: Username: JohnDoe
console.log('Theme:', theme);       // Output: Theme: dark

ตัวอย่างการดึงข้อมูลจาก SessionStorage:

const cartItemsString = sessionStorage.getItem('cartItems');
const isLoggedInString = sessionStorage.getItem('isLoggedIn');

const cartItems = JSON.parse(cartItemsString);
const isLoggedIn = isLoggedInString === 'true';

console.log('Cart Items:', cartItems);   // Output: Cart Items: ['Product1', 'Product2']
console.log('Is Logged In:', isLoggedIn); // Output: Is Logged In: true

คำอธิบาย:

• เราดึงข้อมูลชื่อผู้ใช้และธีมจาก LocalStorage โดยตรง
• สำหรับ SessionStorage เราดึงข้อมูลตะกร้าสินค้าและสถานะการเข้าสู่ระบบ และต้องแปลง JSON string กลับเป็น array และแปลง string 'true' เป็น boolean

การลบข้อมูลด้วย `localStorage.removeItem()` และ `sessionStorage.removeItem()`

Method `removeItem()` ใช้สำหรับลบข้อมูลออกจาก LocalStorage หรือ SessionStorage โดยต้องระบุ key ที่ต้องการลบข้อมูล

ตัวอย่างการลบข้อมูลจาก LocalStorage:

localStorage.removeItem('username');

ตัวอย่างการลบข้อมูลจาก SessionStorage:

sessionStorage.removeItem('cartItems');

การลบข้อมูลทั้งหมดด้วย `clear()`:

Method `clear()` ใช้สำหรับลบข้อมูลทั้งหมดที่จัดเก็บไว้ใน LocalStorage หรือ SessionStorage

ตัวอย่างการลบข้อมูลทั้งหมดจาก LocalStorage:

localStorage.clear();

ตัวอย่างการลบข้อมูลทั้งหมดจาก SessionStorage:

sessionStorage.clear();

ข้อควรระวังในการใช้งาน Web Storage

ถึงแม้ว่า Web Storage จะเป็นเครื่องมือที่มีประโยชน์ แต่ก็มีข้อควรระวังบางประการที่ควรคำนึงถึง:

• ความปลอดภัย: Web Storage ไม่ได้ถูกเข้ารหัส ข้อมูลที่จัดเก็บไว้สามารถถูกเข้าถึงได้โดย JavaScript ที่ทำงานบนโดเมนเดียวกัน ดังนั้น ไม่ควรจัดเก็บข้อมูลที่ละเอียดอ่อน เช่น รหัสผ่าน หรือข้อมูลบัตรเครดิต
• ขนาดพื้นที่จัดเก็บ: แม้ว่า Web Storage จะมีพื้นที่จัดเก็บมากกว่า cookies แต่ก็ยังมีข้อจำกัด ควรตรวจสอบให้แน่ใจว่าข้อมูลที่จัดเก็บไม่เกินขีดจำกัดที่กำหนด (5-10MB ต่อโดเมน)
• การสนับสนุนเบราว์เซอร์: Web Storage ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด แต่ควรตรวจสอบให้แน่ใจว่าเว็บแอปพลิเคชันของคุณทำงานได้อย่างถูกต้องบนเบราว์เซอร์เก่าๆ ด้วย
• การจัดการข้อมูล: ควรมีการวางแผนการจัดการข้อมูลที่ดี เพื่อให้แน่ใจว่าข้อมูลที่จัดเก็บไว้มีความถูกต้องและเป็นปัจจุบัน

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

ตัวอย่าง 1: บันทึกและแสดงชื่อผู้ใช้

<input type="text" id="username" placeholder="Enter your username">
<button onclick="saveUsername()">Save</button>
<p id="greeting"></p>

<script>
  function saveUsername() {
    const username = document.getElementById('username').value;
    localStorage.setItem('savedUsername', username);
    displayGreeting();
  }

  function displayGreeting() {
    const savedUsername = localStorage.getItem('savedUsername');
    if (savedUsername) {
      document.getElementById('greeting').textContent = `Hello, ${savedUsername}!`;
    } else {
      document.getElementById('greeting').textContent = 'Please enter your username.';
    }
  }

  // Display greeting on page load
  displayGreeting();
</script>

ตัวอย่าง 2: นับจำนวนการเข้าชมเว็บไซต์

<p id="visitCount"></p>

<script>
  let visitCount = localStorage.getItem('visitCount');

  if (visitCount) {
    visitCount = parseInt(visitCount) + 1;
  } else {
    visitCount = 1;
  }

  localStorage.setItem('visitCount', visitCount);
  document.getElementById('visitCount').textContent = `You have visited this page ${visitCount} times.`;
</script>

สรุป

HTML5 Web Storage เป็นเครื่องมือที่มีประโยชน์สำหรับการจัดเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้ LocalStorage เหมาะสำหรับข้อมูลที่ต้องการเก็บไว้นาน เช่น การตั้งค่าผู้ใช้ ในขณะที่ SessionStorage เหมาะสำหรับข้อมูลที่เกี่ยวข้องกับเซสชันปัจจุบัน เช่น ข้อมูลตะกร้าสินค้า การใช้งาน Web Storage อย่างถูกต้องจะช่วยให้คุณสร้างเว็บแอปพลิเคชันที่สามารถทำงานแบบออฟไลน์ หรือเก็บข้อมูลผู้ใช้ระหว่างเซสชันได้อย่างมีประสิทธิภาพ

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับ HTML5 Web Workers ซึ่งเป็น API ที่ช่วยให้เราสามารถรัน JavaScript ใน background threads เพื่อปรับปรุงประสิทธิภาพของเว็บแอปพลิเคชัน