มารู้จัก Local Storage กัน

ในปัจจุบันการเก็บข้อมูลของ users ผ่านเว็บบราวเซอร์นั้นมีหลายวิธี โดยการใช้ Local Storage ก็เป็นวิธีหนึ่งที่น่าสนใจเพราะอะไรมาลองดูกัน

Web Storage ใน HTML5

การจัดข้อมูลของ Web Storage จะเก็บข้อมูลไว้ฝั่ง Client side แบบเดียวกันกับ cookie แต่มีข้อดีกว่าคือ Web Storage จะไม่ส่ง HTTP Header เพื่อไปขอฝั่ง Server จึงทำงานได้ไวกว่า cookie อีกทั้ง Web Storage ยังสามารถเก็บข้อมูลได้มากกว่า cookie ถึง 5MB ต่อ 1 โดเมน

การใช้งาน Web Storage แบ่งออกเป็น 2 ส่วนด้วยกันคือ

1. Local Storage คือ การเก็บข้อมูลใส่ Local Storage แบบถาวร ข้อมูลจะหายไปก็ต่อเมื่อ clear Storage หรือกำหนดเวลาวันหมดอายุ
2. Session Storage คือ การเก็บข้อมูลใส่ Session Storage ซึ่งเมื่อปิดเว็บบราวเซอร์ข้อมูลก็จะหายไปหรือกำหนดระยะเวลาวันหมดอายุ

วิธีใช้ Local Storage

การใช้ Local Storage มีวิธีกำหนดค่าดังนี้

1. localStorage.setItem(key, value) คือ การเก็บข้อมูลลงใน Local Storage
2. localStorage.getItem(key) คือ การเรียกใช้ข้อมูล key ของ Local Storage
3. localStorage.removeItem(key) คือ การลบข้อมูลที่ key เก็บไว้
4. localStorage.clear() คือ การลบข้อมูลทั้งหมดในโดเมน

ลองฝึกใช้ Local Storage ร่วมกับ form html

เราจะสร้างแบบฟอร์มเพื่อรับข้อมูลชื่อ ราคาของสินค้าใส่ลง Local Storage และเรียกใช้มูลจาก Local Storage มาแสดงหน้า layout

1. สร้างไฟล์ localstorage_Form.php ขึ้นมาเพื่อสร้างแบบฟอร์มรับข้อมูลชื่อและราคา มีปุ่ม submit และปุ่ม remove

2. สร้างฟังก์ชั่นใน javascript saveMy() และ removeMy() เพื่อนำข้อมูลจาก form ไป set ใน local Storage

2.1 วิธีสร้างฟังก์ชั่น saveMy()

สร้าง key และ value เพื่อ set ข้อมูล โดยใช้คำสั่ง localStorage.setItem(key,value) ระบุ key ชื่อ ‘productList’ และ ระบุ value ชื่อ getProduct

กำหนดค่า getProduct[];

สร้าง object key ชื่อ localproductName และ localPrice เพื่อมารับค่า value ที่ถูกส่งมาจาก input ฟอร์ม

สังเกตว่า Web Storage จะเก็บข้อมูลเป็น String ดังนั้น getProduct จึงต้องใช้ Json.stringify

2.2 วิธีสร้างฟังก์ชั่น removeMy()

กำหนด key ที่ต้องการจะลบซึ่งก็คือ ‘localproductName’ และ ’localPrice’ โดยใช้ localStorage.removeItem

2.3 วิธีเคลียโดเมนของ LocalStorage

ใช้ localStorage.clear() เพื่อเคลียข้อมูลทั้งหมดใน LocalStorage ของโดเมน

3. เมื่อกำหนดค่า key และ value ของ Local Storage เสร็จแล้ว ลองมาตรวจสอบข้อมูลใน localStorage กัน

3.1 วิธีการเข้าไปดูข้อมูล Local Storage

คลิกขวา Inspect -> เข้าเมนู Application -> Local Storage

3.2 เมื่อใส่ข้อมูลในช่อง product-name และ Original Price แล้วกด save ข้อมูลจะถูกเก็บลง key และ value

4. สร้างไฟล์ localstorage_Product.php เพื่อรับข้อมูลจาก form มาแสดง layout

4.1 วิธีการ get ข้อมูลจาก Local Storage

เราจะใช้ javascript ในการ get ข้อมูลเนื่องจาก Local Storage เป็นฝั่ง Client side

ใช้คำสั่ง localStorage.getItem(ตามด้วยระบุ key ซึ่งคือ productList) เพื่อ get ข้อมูล สังเกตว่าเนื่องจากเราใช้ JSON.stringify ในการ set ข้อมูลดังนั้น ต้องใช้ JSON.parse ในการ get ข้อมูลเช่นกัน

ผลลัพธ์ layout จะแสดงผลดังนี้

จากตัวอย่างก็พอทราบว่า Local Storage สามารถทำอะไรได้บ้าง

แล้วข้อเสีย Web Storage มันมีข้อเสียบ้างไหม?

เนื่องจาก Web Storage เก็บข้อมูลเป็น String ดังนั้นมีโอกาสถูกอ่านข้อมูลได้ง่ายไม่ปลอดภัย จึงไม่นิยมใช้ Web Storageในการเก็บข้อมูลที่เป็นความลับ