พื้นที่จัดเก็บข้อมูลบนเว็บซึ่งเดิมเรียกว่าพื้นที่จัดเก็บข้อมูล DOM ( พื้นที่จัดเก็บ ข้อมูล Document Object Model ) เป็น API JavaScript มาตรฐานที่ เว็บเบราว์เซอร์จัดให้ช่วยให้เว็บไซต์ สามารถ จัดเก็บ ข้อมูล ถาวรบนอุปกรณ์ของผู้ใช้ได้คล้ายกับคุกกี้แต่มีความจุมากกว่ามาก^{[ 1 ]}และไม่มีข้อมูลส่งใน ส่วน หัวHTTP ^{[ 2 ]}พื้นที่จัดเก็บข้อมูลบนเว็บมีสองประเภทหลัก ได้แก่ พื้นที่จัดเก็บข้อมูลในเครื่อง และพื้นที่จัดเก็บข้อมูลแบบเซสชัน ซึ่งมีพฤติกรรมคล้ายกับคุกกี้ถาวรและคุกกี้แบบเซสชัน^ตามลำดับ พื้นที่จัดเก็บข้อมูลบนเว็บได้รับการกำหนดมาตรฐานโดยWorld Wide Web Consortium (W3C) ^{[ 3 ]}และWHATWG [ ^{4 ]}และได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมด

การจัดเก็บข้อมูลบนเว็บแตกต่างจากคุกกี้ในประเด็นสำคัญบางประการ

คุกกี้มีไว้สำหรับการสื่อสารกับเซิร์ฟเวอร์ โดยจะถูกเพิ่มเข้าไปในทุกคำขอโดยอัตโนมัติ และทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอนต์สามารถเข้าถึงได้ ส่วนการจัดเก็บข้อมูลบนเว็บนั้นอยู่ภายใต้ขอบเขตของการเขียนสคริปต์ฝั่งไคลเอนต์ โดยเฉพาะ ข้อมูลที่จัดเก็บข้อมูลบนเว็บจะไม่ถูกส่งไปยังเซิร์ฟเวอร์โดยอัตโนมัติในทุกคำขอ HTTP และเว็บเซิร์ฟเวอร์ไม่สามารถเขียนข้อมูลลงในการจัดเก็บข้อมูลบนเว็บได้โดยตรง อย่างไรก็ตาม สามารถทำสิ่งเหล่านี้ได้ด้วยสคริปต์ฝั่งไคลเอนต์ที่เขียนขึ้นอย่างชัดเจน ซึ่งช่วยให้สามารถปรับแต่งการโต้ตอบที่ต้องการของเซิร์ฟเวอร์ได้

คุกกี้มีขนาดจำกัดเพียง 4 กิโลไบต์เท่านั้น พื้นที่จัดเก็บข้อมูลบนเว็บมีพื้นที่มากกว่านั้นมาก:

• Opera 10.50+ อนุญาตให้ใช้หน่วยความจำ 5 MB ^{[ 1 ]}
• Safari 8 อนุญาตให้ใช้หน่วยความจำ 5 MB ^{[ 5 ]}
• Firefoxอนุญาตให้ใช้ 10 MB ^{[ 6 ]} (เดิม 5 MB ต่อต้นทางในปี 2550 ^{[ 7 ]} )
• Google Chromeอนุญาตให้ใช้ 10 MB ต่อต้นทาง (เดิม 5 MB ต่อต้นทาง) ^{[ 8 ]}
• Internet Explorerอนุญาตให้ใช้พื้นที่จัดเก็บ 10 MB ต่อพื้นที่^{[ 9 ]}

พื้นที่จัดเก็บข้อมูลบนเว็บมีพื้นที่จัดเก็บข้อมูลสองแบบที่แตกต่างกัน ได้แก่ พื้นที่จัดเก็บข้อมูลในเครื่อง และพื้นที่จัดเก็บข้อมูลแบบเซสชัน ซึ่งแตกต่างกันในขอบเขตและอายุการใช้งาน ข้อมูลที่จัดเก็บในพื้นที่จัดเก็บข้อมูลในเครื่องจะเป็นแบบต่อต้นทาง (ต่อโปรโตคอล ชื่อโฮสต์ และหมายเลขพอร์ต ตามที่กำหนดไว้ในนโยบายต้นทางเดียวกัน ) ข้อมูลจะพร้อมใช้งานสำหรับสคริปต์ทั้งหมดที่โหลดจากหน้าเว็บจากต้นทางเดียวกันที่เคยจัดเก็บข้อมูลไว้ก่อนหน้านี้ และจะยังคงอยู่แม้หลังจากปิดเบราว์เซอร์แล้ว ด้วยเหตุนี้ พื้นที่จัดเก็บข้อมูลบนเว็บจึงไม่ประสบปัญหาความสมบูรณ์ที่อ่อนแอและความลับที่อ่อนแอของคุกกี้ ตามที่อธิบายไว้ในRFC  6265ส่วนที่ 8.5 และ 8.6 พื้นที่จัดเก็บข้อมูลแบบเซสชันเป็นแบบต่อต้นทางและต่ออินสแตนซ์ (ต่อหน้าต่างหรือต่อแท็บ) และจำกัดเฉพาะอายุการใช้งานของอินสแตนซ์เท่านั้น พื้นที่จัดเก็บข้อมูลแบบเซสชันมีจุดประสงค์เพื่อให้สามารถเรียกใช้แอปพลิเคชันเว็บเดียวกันในหน้าต่างต่างๆ ได้โดยไม่รบกวนซึ่งกันและกัน ซึ่งเป็นกรณีการใช้งานที่คุกกี้ไม่รองรับได้ดีนัก^{[ 10 ]}

การจัดเก็บข้อมูลบนเว็บมีอินเทอร์เฟซการเขียนโปรแกรมที่ดีกว่าคุกกี้ เพราะมันแสดงโมเดลข้อมูลแบบอาร์เรย์เชิงสัมพันธ์ ซึ่งทั้งคีย์และค่าเป็น สตริง

เบราว์เซอร์ที่รองรับ Web Storage จะมีอ็อบเจ็กต์ส่วนกลางsessionStorageและlocalStorageประกาศไว้ที่ระดับหน้าต่าง โค้ด JavaScript ต่อไปนี้ สามารถใช้ในเบราว์เซอร์เหล่านี้เพื่อเรียกใช้งาน Web Storage ได้:

// เก็บค่าไว้ในเบราว์เซอร์ตลอดระยะเวลาของเซสชันsessionStorage.setItem ( " key" , "value" );// ดึงค่า (ค่าจะถูกลบเมื่อปิดและเปิดเบราว์เซอร์ใหม่) ... alert ( sessionStorage . getItem ( "key" ));// เก็บค่าไว้ในเบราว์เซอร์หลังจากสิ้นสุดเซสชันlocalStorage.setItem ( " key" , "value" );// ดึงค่า (ค่าจะยังคงอยู่แม้หลังจากปิดและเปิดเบราว์เซอร์ใหม่) alert ( localStorage . getItem ( "key" ));

สามารถจัดเก็บเฉพาะสตริงผ่าน Storage API ได้เท่านั้น^{[ 11 ]}การพยายามจัดเก็บประเภทข้อมูลอื่นจะส่งผลให้เบราว์เซอร์ส่วนใหญ่แปลงเป็นสตริงโดยอัตโนมัติ อย่างไรก็ตาม การแปลงเป็นJSONช่วยให้สามารถจัดเก็บอ็อบเจ็กต์ JavaScript ได้อย่างมีประสิทธิภาพ

// เก็บ อ็อบเจ็กต์แทนสตริงlocalStorage.setItem ( "key" , { name : "value" }); alert ( typeof localStorage.getItem ( ' key ' )); // สตริง// เก็บค่าจำนวนเต็มแทนสตริงlocalStorage.setItem ( " key" , 1 ); alert ( typeof localStorage.getItem ( " key" )); // สตริง// จัดเก็บอ็อบเจ็กต์โดยใช้ JSON localStorage.setItem ( " key" , JSON.stringify ( { name : "value" } ) ); alert(JSON.parse(localStorage.getItem ( " key " ) ) . name ) ; // value

ร่างเอกสารของ W3C มีชื่อว่า "Web Storage" "DOM storage" ก็เป็นชื่อที่ใช้กันทั่วไปเช่นกัน แม้ว่าจะเริ่มใช้น้อยลงแล้ว ตัวอย่างเช่น บทความเกี่ยวกับ "DOM Storage" บนเว็บไซต์สำหรับนักพัฒนาของ Mozilla และ Microsoft ได้ถูกแทนที่ด้วยบทความเกี่ยวกับ "Web Storage" ^{[ 12 ] [ 13 ] [ 14 ] [ 15 ]}

"DOM" ใน DOM storage ไม่ได้หมายถึงDocument Object Model อย่างแท้จริง ตามที่ W3C ระบุไว้ว่า "คำว่า DOM ใช้เพื่ออ้างถึงชุด API ที่มีให้สำหรับสคริปต์ในเว็บแอปพลิเคชัน และไม่ได้หมายความถึงการมีอยู่ของอ็อบเจ็กต์เอกสารจริงเสมอไป..." ^{[ 16 ]}

โดยค่าเริ่มต้น การจัดเก็บข้อมูลบนเว็บจะถูกเปิดใช้งานในเบราว์เซอร์เวอร์ชันปัจจุบันทั้งหมดที่รองรับ โดยผู้ผลิตเบราว์เซอร์จะมีวิธีการให้ผู้ใช้สามารถเปิดหรือปิดใช้งานการจัดเก็บข้อมูลบนเว็บ หรือล้าง "แคช" ของการจัดเก็บข้อมูลบนเว็บได้โดยตรง นอกจากนี้ยังมีการควบคุมการจัดเก็บข้อมูลบนเว็บที่คล้ายกันผ่านส่วนขยายเบราว์เซอร์ของ บุคคลที่สาม เบราว์เซอร์แต่ละตัวจัดเก็บข้อมูลบนเว็บแตกต่างกัน:

• Firefoxบันทึกวัตถุ Web storage ลงในไฟล์SQLitewebappsstore.sqlite ที่เรียกว่า ในโฟลเดอร์โปรไฟล์ของผู้ใช้^{[ 17 ]}
• Google Chromeบันทึกข้อมูลการจัดเก็บข้อมูลบนเว็บลงใน ไฟล์ SQLiteในโปรไฟล์ของผู้ใช้ โฟลเดอร์ย่อยที่บรรจุไฟล์นี้คือ " " \AppData\Local\Google\Chrome\User Data\Default\Local StorageบนWindowsและ " ~/Library/Application Support/Google/Chrome/Default/Local Storage" บนmacOS
• พื้นที่จัดเก็บข้อมูลบนเว็บของOpera\AppData\Roaming\Opera\Opera\sessions\autosave.win จะอยู่ที่ " " หรือ " \AppData\Local\Opera\Opera\pstorage\" ขึ้นอยู่กับเวอร์ชันของ Opera
• พื้นที่จัดเก็บข้อมูลบนเว็บของInternet Explorer\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage คือ " "
• พื้นที่จัดเก็บข้อมูลบนเว็บของ Safariอยู่ในโฟลเดอร์ที่มีป้ายกำกับว่า " LocalStorage" ภายในsafariโฟลเดอร์ที่ซ่อนอยู่ " " ^{[ 18 ]}

• API ฐานข้อมูลที่จัดทำดัชนี

• มาตรฐาน HTML Living Standard 11 พื้นที่จัดเก็บข้อมูลบนเว็บ
• W3C: พื้นที่จัดเก็บข้อมูลบนเว็บ
• API พื้นที่จัดเก็บข้อมูลบนเว็บบนเครือข่ายนักพัฒนาของ Mozilla
• Opera: Web Storage: การจัดเก็บข้อมูลฝั่งไคลเอ็นต์ที่ง่ายขึ้นและมีประสิทธิภาพยิ่งขึ้น
• พื้นที่จัดเก็บข้อมูลภายในเครื่องบน BlackBerry DevZone