Local Storage และ Session Storage

Local Storage และ Session Storage: เก็บข้อมูลใน Browser

ในโลกของการพัฒนาเว็บสมัยใหม่ การจัดการข้อมูลในฝั่ง Client (Client-side) เป็นสิ่งสำคัญอย่างยิ่ง โดยเฉพาะอย่างยิ่งเมื่อต้องการเก็บข้อมูลชั่วคราวหรือถาวรใน Browser เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น JavaScript มีเครื่องมือสำคัญสองอย่างที่ช่วยให้เราทำเช่นนั้นได้ นั่นคือ Local Storage และ Session Storage

บทความนี้จะพาคุณไปรู้จักกับ Local Storage และ Session Storage อย่างละเอียด ตั้งแต่การใช้งานพื้นฐาน ไปจนถึงข้อควรระวังและกรณีใช้งานจริง เพื่อให้คุณสามารถนำไปประยุกต์ใช้กับโปรเจกต์ของคุณได้อย่างมีประสิทธิภาพ

Local Storage คืออะไร?

Local Storage เป็น Web Storage API ที่ใช้สำหรับเก็บข้อมูลใน Browser ของผู้ใช้แบบถาวร (persistent data) ข้อมูลที่เก็บไว้ใน Local Storage จะยังคงอยู่ แม้ว่าผู้ใช้จะปิด Browser ไปแล้วก็ตาม ตราบใดที่ผู้ใช้ไม่ได้ล้าง Cache หรือ Data ของ Browser

การใช้งาน Local Storage เบื้องต้น

Local Storage มี methods หลักๆ ที่เราต้องทำความรู้จักดังนี้:

• localStorage.setItem(key, value): ใช้สำหรับเก็บข้อมูล โดย key คือชื่อของข้อมูล (String) และ value คือค่าของข้อมูล (String)
• localStorage.getItem(key): ใช้สำหรับดึงข้อมูล โดย key คือชื่อของข้อมูลที่เราต้องการดึง
• localStorage.removeItem(key): ใช้สำหรับลบข้อมูล โดย key คือชื่อของข้อมูลที่เราต้องการลบ
• localStorage.clear(): ใช้สำหรับลบข้อมูลทั้งหมดใน Local Storage

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

// เก็บข้อมูล
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('theme', 'dark');

// ดึงข้อมูล
const username = localStorage.getItem('username');
const theme = localStorage.getItem('theme');

console.log(username); // Output: JohnDoe
console.log(theme);    // Output: dark

// ลบข้อมูล
localStorage.removeItem('theme');

// ลบข้อมูลทั้งหมด
// localStorage.clear();

ข้อควรจำ:

• ข้อมูลที่เก็บใน Local Storage จะถูกเก็บเป็น String เสมอ หากต้องการเก็บข้อมูลประเภทอื่น เช่น Number หรือ Object ต้องแปลงเป็น String ก่อน
• Local Storage มีขนาดจำกัด โดยทั่วไปอยู่ที่ 5-10 MB ขึ้นอยู่กับ Browser

กรณีใช้งานจริงของ Local Storage

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

• Theme preferences: เก็บ Theme ที่ผู้ใช้เลือก เพื่อให้เว็บไซต์แสดงผลด้วย Theme ที่ผู้ใช้ต้องการทุกครั้งที่เข้ามา
• User settings: เก็บการตั้งค่าต่างๆ ของผู้ใช้ เช่น ภาษาที่เลือก หรือการเปิด/ปิด Notifications
• Shopping cart data: เก็บข้อมูลสินค้าในตะกร้าสินค้า (แต่ควรระมัดระวังเรื่องความปลอดภัย หากเก็บข้อมูลที่ sensitive เช่น ข้อมูลบัตรเครดิต)
• Authentication tokens: เก็บ access token (แต่ควรใช้ร่วมกับเทคนิคอื่นๆ เพื่อความปลอดภัย)

ข้อผิดพลาดที่พบบ่อยในการใช้งาน Local Storage

แม้ว่า Local Storage จะใช้งานง่าย แต่ก็มีข้อผิดพลาดที่พบบ่อยที่ควรระวัง:

• Storing sensitive data: ไม่ควรเก็บข้อมูลที่ sensitive เช่น รหัสผ่าน หรือข้อมูลบัตรเครดิต ใน Local Storage โดยตรง เพราะมีความเสี่ยงด้านความปลอดภัย
• Exceeding storage limit: ควรตรวจสอบขนาดข้อมูลที่เก็บใน Local Storage อย่างสม่ำเสมอ เพื่อป้องกันไม่ให้เกินขีดจำกัด
• Incorrect data type: อย่าลืมแปลงข้อมูลให้เป็น String ก่อนที่จะเก็บใน Local Storage

Session Storage คืออะไร?

Session Storage เป็น Web Storage API ที่คล้ายกับ Local Storage แต่มีข้อแตกต่างที่สำคัญคือ ข้อมูลที่เก็บไว้ใน Session Storage จะถูกลบออกเมื่อผู้ใช้ปิด Tab หรือ Browser Window นั่นหมายความว่า Session Storage เหมาะสำหรับเก็บข้อมูลชั่วคราวที่เกี่ยวข้องกับ Session ของผู้ใช้

การใช้งาน Session Storage เบื้องต้น

Session Storage มี methods เหมือนกับ Local Storage ทุกประการ:

• sessionStorage.setItem(key, value): ใช้สำหรับเก็บข้อมูล
• sessionStorage.getItem(key): ใช้สำหรับดึงข้อมูล
• sessionStorage.removeItem(key): ใช้สำหรับลบข้อมูล
• sessionStorage.clear(): ใช้สำหรับลบข้อมูลทั้งหมด

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

// เก็บข้อมูล
sessionStorage.setItem('currentPage', '/products');
sessionStorage.setItem('formSubmitted', 'false');

// ดึงข้อมูล
const currentPage = sessionStorage.getItem('currentPage');
const formSubmitted = sessionStorage.getItem('formSubmitted');

console.log(currentPage);   // Output: /products
console.log(formSubmitted);  // Output: false

// ลบข้อมูล
sessionStorage.removeItem('formSubmitted');

// ลบข้อมูลทั้งหมด
// sessionStorage.clear();

ข้อควรจำ:

• ข้อมูลที่เก็บใน Session Storage จะถูกเก็บเป็น String เสมอ
• Session Storage มีขนาดจำกัด โดยทั่วไปอยู่ที่ 5-10 MB ขึ้นอยู่กับ Browser
• ข้อมูลใน Session Storage จะถูกลบเมื่อปิด Tab หรือ Browser Window

กรณีใช้งานจริงของ Session Storage

Session Storage เหมาะสำหรับเก็บข้อมูลชั่วคราวที่เกี่ยวข้องกับ Session ของผู้ใช้ ตัวอย่างเช่น:

• Form data: เก็บข้อมูลที่ผู้ใช้กรอกใน Form ระหว่างที่กำลังทำรายการ
• Current page: เก็บ URL ของหน้าที่ผู้ใช้กำลังดูอยู่
• User authentication status: เก็บสถานะการ Login ของผู้ใช้ (แต่ควรใช้ร่วมกับเทคนิคอื่นๆ เพื่อความปลอดภัย)
• Temporary filters: เก็บค่า Filter ที่ผู้ใช้เลือกไว้ชั่วคราว

ข้อผิดพลาดที่พบบ่อยในการใช้งาน Session Storage

ข้อผิดพลาดที่พบบ่อยในการใช้งาน Session Storage คล้ายกับ Local Storage แต่มีข้อควรระวังเพิ่มเติมคือ:

• Relying on Session Storage for critical data: ไม่ควรพึ่งพา Session Storage สำหรับข้อมูลที่สำคัญมาก เพราะข้อมูลจะหายไปเมื่อผู้ใช้ปิด Tab หรือ Browser Window
• Storing large amounts of data: แม้ว่า Session Storage จะมีขนาดจำกัด แต่ก็ไม่ควรเก็บข้อมูลจำนวนมากเกินไป เพราะอาจทำให้ประสิทธิภาพของเว็บไซต์ลดลง

ความแตกต่างระหว่าง Local Storage และ Session Storage

ตารางสรุปความแตกต่างที่สำคัญระหว่าง Local Storage และ Session Storage:

สรุป:

• Local Storage: เหมาะสำหรับเก็บข้อมูลที่ต้องการให้คงอยู่ แม้ผู้ใช้จะปิด Browser
• Session Storage: เหมาะสำหรับเก็บข้อมูลชั่วคราวที่เกี่ยวข้องกับ Session ของผู้ใช้

สรุป

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

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน Cookies ซึ่งเป็นอีกหนึ่งวิธีในการเก็บข้อมูลใน Browser และมีความแตกต่างจาก Local Storage และ Session Storage อย่างไร