API ที่เก็บข้อมูลเว็บ
Web Storage API เป็นไวยากรณ์ที่เรียบง่ายสำหรับการจัดเก็บและดึงข้อมูลในเบราว์เซอร์ ใช้งานง่ายมาก:
ตัวอย่าง
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");
Web Storage API รองรับในทุกเบราว์เซอร์:
Chrome | IE/Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
วัตถุ localStorage
ออบเจ็กต์ localStorage ให้การเข้าถึงที่จัดเก็บในเครื่องสำหรับเว็บไซต์เฉพาะ ช่วยให้คุณสามารถจัดเก็บ อ่าน เพิ่ม แก้ไข และลบรายการข้อมูลสำหรับโดเมนนั้น
ข้อมูลจะถูกเก็บไว้โดยไม่มีวันหมดอายุ และจะไม่ถูกลบเมื่อปิดเบราว์เซอร์
ข้อมูลจะแสดงเป็นวัน สัปดาห์ และปี
วิธี setItem()
localStorage.setItem() วิธีการเก็บรายการข้อมูลในที่จัดเก็บ
ใช้ชื่อและค่าเป็นพารามิเตอร์:
ตัวอย่าง
localStorage.setItem("name", "John Doe");
getItem() เมธอด
localStorage.getItem() วิธีการดึงรายการข้อมูลจากที่จัดเก็บ
ใช้ชื่อเป็นพารามิเตอร์:
ตัวอย่าง
localStorage.getItem("name");
วัตถุ sessionStorage
วัตถุ sessionStorage เหมือนกับวัตถุ localStorage
ความแตกต่างคืออ็อบเจ็กต์ sessionStorage เก็บข้อมูลสำหรับหนึ่งเซสชัน
ข้อมูลจะถูกลบออกเมื่อปิดเบราว์เซอร์
ตัวอย่าง
sessionStorage.getItem("name");
วิธี setItem()
sessionStorage.setItem() วิธีการเก็บรายการข้อมูลในการจัดเก็บ
ใช้ชื่อและค่าเป็นพารามิเตอร์:
ตัวอย่าง
sessionStorage.setItem("name", "John Doe");
getItem() เมธอด
sessionStorage.getItem() วิธีการดึงรายการข้อมูลจากที่จัดเก็บ
ใช้ชื่อเป็นพารามิเตอร์:
ตัวอย่าง
sessionStorage.getItem("name");
คุณสมบัติและวิธีการจัดเก็บอ็อบเจ็กต์
Property/Method | Description |
---|---|
key(n) | Returns the name of the nth key in the storage |
length | Returns the number of data items stored in the Storage object |
getItem(keyname) | Returns the value of the specified key name |
setItem(keyname, value) | Adds that key to the storage, or update that key's value if it already exists |
removeItem(keyname) | Removes that key from the storage |
clear() | Empty all key out of the storage |
เพจที่เกี่ยวข้องสำหรับ Web Storage API
Property | Description |
---|---|
window.localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
window.sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |