API ที่เก็บข้อมูลเว็บ

สารบัญ

    แสดงสารบัญ

Web Storage API เป็นไวยากรณ์ง่ายๆ สำหรับจัดเก็บและเรียกข้อมูลในเบราว์เซอร์ มันใช้งานง่ายมาก:

ตัวอย่าง

localStorage.setItem("name", "John Doe");
localStorage.getItem("name");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

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");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

เมธอด setItem()

เมธอด sessionStorage.setItem() จัดเก็บรายการข้อมูลในที่เก็บข้อมูล

ใช้ชื่อและค่าเป็นพารามิเตอร์:

ตัวอย่าง

sessionStorage.setItem("name", "John Doe");

เมธอด getItem()

เมธอด sessionStorage.getItem() ดึงรายการข้อมูลจากที่เก็บข้อมูล

ใช้ชื่อเป็นพารามิเตอร์:

ตัวอย่าง

sessionStorage.getItem("name");

คุณสมบัติและวิธีการของออบเจ็กต์หน่วยเก็บข้อมูล

key(n)

ส่งกลับชื่อของคีย์ n ในที่เก็บข้อมูล

length

ส่งกลับจำนวนรายการข้อมูลที่จัดเก็บไว้ในออบเจ็กต์ Storage

getItem(keyname)

ส่งกลับค่าของชื่อคีย์ที่ระบุ

setItem(keyname, value)

เพิ่มคีย์ไปยังที่เก็บข้อมูลหรืออัปเดตค่าคีย์ (หากมีอยู่แล้ว)

removeItem(keyname)

ลบคีย์นั้นออกจากที่เก็บข้อมูล

clear()

ล้างคีย์ทั้งหมดออกจากที่เก็บข้อมูล

หน้าที่เกี่ยวข้องสำหรับ Web Storage API

window.localStorage

อนุญาตให้บันทึกคู่คีย์/ค่าในเว็บเบราว์เซอร์ เก็บข้อมูลโดยไม่มีหมายเลข วันหมดอายุ

window.sessionStorage

อนุญาตให้บันทึกคู่คีย์/ค่าในเว็บเบราว์เซอร์ เก็บข้อมูลไว้อย่างหนึ่ง การประชุม