HTML5 มีกลไกสองอย่างที่คล้ายกับคุกกี้เซสชัน HTTP สำหรับการจัดเก็บข้อมูลที่มีโครงสร้างในฝั่งไคลเอ็นต์และเพื่อเอาชนะข้อเสียต่อไปนี้
- คุกกี้จะรวมอยู่ในคำขอ HTTP ทุกครั้ง ซึ่งทำให้เว็บแอปพลิเคชันของคุณช้าลงโดยการส่งข้อมูลเดียวกัน
- คุกกี้จำกัดข้อมูลไว้ที่ประมาณ 4 KB ไม่เพียงพอที่จะจัดเก็บข้อมูลที่จำเป็น
กลไกทั้งสองสำหรับการจัดเก็บคือที่จัดเก็บเซสชันและที่จัดเก็บในตัวเครื่อง และจะใช้เพื่อจัดการกับสถานการณ์ที่แตกต่างกัน
ที่เก็บข้อมูลเซสชัน
Session Storage ได้รับการออกแบบมาสำหรับสถานการณ์ที่ผู้ใช้ทำธุรกรรมเดียว แต่สามารถทำธุรกรรมได้หลายรายการในหน้าต่างต่างๆ ในเวลาเดียวกัน
คุณสามารถลองเรียกใช้สิ่งต่อไปนี้เพื่อตั้งค่าตัวแปรเซสชันและเข้าถึงตัวแปรนั้นได้
ตัวอย่าง
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html> ที่เก็บข้อมูลในเครื่อง
Local Storage ได้รับการออกแบบสำหรับการจัดเก็บที่ครอบคลุมหลายหน้าต่างและอยู่ได้นานกว่าเซสชันปัจจุบัน โดยเฉพาะอย่างยิ่ง เว็บแอปพลิเคชันอาจต้องการจัดเก็บข้อมูลผู้ใช้หลายเมกะไบต์ เช่น เอกสารที่ผู้ใช้สร้างขึ้นทั้งหมดหรือกล่องจดหมายของผู้ใช้ ทางฝั่งไคลเอ็นต์เพื่อเหตุผลด้านประสิทธิภาพ
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อตั้งค่าตัวแปรพื้นที่เก็บข้อมูลในเครื่อง และเข้าถึงตัวแปรนั้นทุกครั้งที่เข้าถึงหน้านี้ แม้กระทั่งครั้งถัดไปเมื่อคุณเปิดหน้าต่าง
ตัวอย่าง
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
} else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html> 