การใช้ Session Storage และ Local Storage ด้วย JavaScript

Session Storage และ Local Storage เป็นเทคโนโลยีการจัดเก็บข้อมูลในเบราว์เซอร์ที่ช่วยให้สามารถเก็บข้อมูลชั่วคราวหรือถาวรในฝั่งผู้ใช้ (client-side) ได้ โดยไม่ต้องส่งข้อมูลไปยังเซิร์ฟเวอร์ทุกครั้ง ในบทความนี้ เราจะมาทำความเข้าใจและเรียนรู้วิธีการใช้งานทั้งสองแบบด้วย JavaScript

---

Session Storage

ความหมาย

Session Storage ใช้สำหรับการจัดเก็บข้อมูลที่มีอายุการใช้งานเท่ากับระยะเวลาที่เบราว์เซอร์ยังเปิดแท็บนั้นอยู่ เมื่อปิดแท็บหรือรีเฟรชเบราว์เซอร์ ข้อมูลใน Session Storage จะถูกลบออกทันที

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

1. การเพิ่มข้อมูล

sessionStorage.setItem('key', 'value');

ตัวอย่าง:

sessionStorage.setItem('username', 'JohnDoe');

2. การดึงข้อมูล

const value = sessionStorage.getItem('key');

ตัวอย่าง:

const username = sessionStorage.getItem('username');
console.log(username); // Output: JohnDoe

3. การลบข้อมูลเฉพาะรายการ

sessionStorage.removeItem('key');

ตัวอย่าง:

sessionStorage.removeItem('username');

4. การลบข้อมูลทั้งหมด

sessionStorage.clear();

5. การตรวจสอบจำนวนข้อมูล

const length = sessionStorage.length;
console.log(length);

---

Local Storage

ความหมาย

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

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

1. การเพิ่มข้อมูล

localStorage.setItem('key', 'value');

ตัวอย่าง:

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

2. การดึงข้อมูล

const value = localStorage.getItem('key');

ตัวอย่าง:

const theme = localStorage.getItem('theme');
console.log(theme); // Output: dark

3. การลบข้อมูลเฉพาะรายการ

localStorage.removeItem('key');

ตัวอย่าง:

localStorage.removeItem('theme');

4. การลบข้อมูลทั้งหมด

localStorage.clear();

5. การตรวจสอบจำนวนข้อมูล

const length = localStorage.length;
console.log(length);

---

การเปรียบเทียบระหว่าง Session Storage และ Local Storage

คุณสมบัติ	Session Storage	Local Storage
อายุของข้อมูล	ลบเมื่อปิดแท็บ	อยู่จนกว่าจะถูกลบ
ขนาดข้อมูลสูงสุด	5MB (โดยทั่วไป)	5MB (โดยทั่วไป)
การเข้าถึงข้อมูล	ภายในแท็บเดียวกัน	ทุกแท็บในโดเมนเดียวกัน

---

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

การเก็บโปรไฟล์ยูสเซอร์ด้วย Local Storage

// ตัวอย่างข้อมูลโปรไฟล์ยูสเซอร์
const userProfile = {
  id: '12345',
  username: 'johndoe',
  email: 'johndoe@example.com',
  preferences: {
    theme: 'light',
    notifications: true
  }
};

// บันทึกโปรไฟล์ยูสเซอร์ลงใน Local Storage
localStorage.setItem('userProfile', JSON.stringify(userProfile));

// ดึงข้อมูลโปรไฟล์ยูสเซอร์จาก Local Storage
const storedProfile = JSON.parse(localStorage.getItem('userProfile'));
console.log(storedProfile.username); // Output: johndoe
console.log(storedProfile.preferences.theme); // Output: light

// อัปเดตข้อมูลโปรไฟล์ยูสเซอร์
storedProfile.preferences.theme = 'dark';
localStorage.setItem('userProfile', JSON.stringify(storedProfile));

// ลบโปรไฟล์ยูสเซอร์
localStorage.removeItem('userProfile');

การจัดเก็บสถานะชั่วคราวด้วย Session Storage

// บันทึกสถานะชั่วคราว
sessionStorage.setItem('isLoggedIn', 'true');

// ตรวจสอบสถานะ
if (sessionStorage.getItem('isLoggedIn') === 'true') {
    console.log('User is logged in');
} else {
    console.log('User is not logged in');
}

// ลบสถานะ
sessionStorage.clear();

---

สรุป

Session Storage และ Local Storage เป็นเครื่องมือที่ทรงพลังในการจัดเก็บข้อมูลในฝั่งผู้ใช้ การเลือกใช้งานแต่ละแบบขึ้นอยู่กับลักษณะของข้อมูลที่ต้องการจัดเก็บและความต้องการของระบบ เช่น หากต้องการจัดเก็บข้อมูลระยะสั้น ให้เลือกใช้ Session Storage แต่หากต้องการจัดเก็บข้อมูลถาวร ให้เลือกใช้ Local Storage อย่างเหมาะสม