Web Storage API

API Web Storage คือภาษาการเขียนที่ง่ายที่ใช้สำหรับเก็บและดึงข้อมูลในเว็บเบราว์เซอร์ มันง่ายที่ใช้มาก:

ตัวอย่าง

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

ลองทดสอบด้วยตัวเอง

ทุกเว็บเบราว์เซอร์เก็บ API Web Storage ได้

Chrome IE Firefox Safari Opera
Chrome IE/Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

localStorage แฟ้ม

localStorage แฟ้มให้สามารถเข้าถึงคลังค่าท้องถิ่นของเว็บไซต์เฉพาะๆ ได้ มันอนุญาตให้คุณเก็บ, อ่าน, เพิ่ม, แก้ไข และลบข้อมูลรายการของโดเมนนี้

ข้อมูลที่เก็บค่าไม่มีวันหมดอายุ และจะไม่ถูกลบเมื่อเว็บเบราว์เซอร์ปิด

ข้อมูลนี้จะมีจำนวนวัน, สัปดาห์ และปีที่สามารถใช้ได้

วิธี setItem()

วิธี localStorage.setItem() จะเก็บข้อมูลรายการใน storage

มันรับชื่อและค่าเป็นพารามิเตอร์：

ตัวอย่าง

localStorage.setItem("name", "Bill Gates");

วิธี getItem()

วิธี localStorage.getItem() ดึงข้อมูลรายการจากคลังค่า (storage)

มันรับชื่อเป็นตัวอักษรสายเป็นพารามิเตอร์：

ตัวอย่าง

localStorage.getItem("name");

sessionStorage แฟ้ม

sessionStorage แฟ้มเหมือน localStorage แฟ้ม

ความแตกต่างคือ sessionStorage แฟ้มจะเก็บข้อมูลเซสชัน

ข้อมูลจะถูกลบเมื่อเว็บเบราว์เซอร์ปิด

ตัวอย่าง

sessionStorage.getItem("name");

ลองทดสอบด้วยตัวเอง

วิธี setItem()

วิธี sessionStorage.setItem() จะเก็บข้อมูลรายการในคลังค่า (storage)

มันรับชื่อและค่าเป็นพารามิเตอร์：

ตัวอย่าง

sessionStorage.setItem("name", "Bill Gates");

วิธี getItem()

วิธี sessionStorage.getItem() ดึงข้อมูลรายการจากคลังค่า (storage)

มันรับชื่อเป็นตัวอักษรสายเป็นพารามิเตอร์：

ตัวอย่าง

sessionStorage.getItem("name");

แฟ้ม/วิธี Storage

แฟ้ม/วิธี 描述
key(n) คืนชื่อตัวแปรที่เก็บค่าในคลังค่าที่มีที่นั่งที่ n。
length 返回存储在 Storage 对象中的数据项数。
getItem(keyname) 返回指定的键名的值。
setItem(keyname, value) 将键添加到存储中，或者如果键已经存在，则更新该键的值。
removeItem(keyname) 从存储中删除该键。
clear() 清空所有键。

Web Storage API 相关页面

属性 描述
window.localStorage 允许在 Web 浏览器中保存键/值对。存储没有到期日期的数据。
window.sessionStorage 允许在 Web 浏览器中保存键/值对。存储一个会话的数据。