คุณสมบัติ window.sessionStorage ของ HTML อนุญาตให้เราจัดเก็บคู่คีย์/ค่า (key/value pairs) ในเบราว์เซอร์เว็บเพียงครั้งเดียว (session) หมายความว่าข้อมูลจะถูกลบเมื่อปิดแท็บเบราว์เซอร์
ไวยากรณ์
ไวยากรณ์มีดังนี้ −
window.sessionStorage
ลองดูตัวอย่างการใช้งานคุณสมบัติ sessionStorage ของ HTML Window −
ตัวอย่าง
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat; text-align: center; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 30%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; } .show{ font-size:1.2rem; } </style> <body> <h1>การสาธิตคุณสมบัติ sessionStorage ของ HTML Window</h1> <button onclick="store()" class="btn">จัดเก็บชื่อ 'John Smith' ไปยัง sessionStorage</button> <button onclick="display()" class="btn">แสดงค่าที่จัดเก็บใน sessionStorage</button> <div class="show"></div> <script> function store(){ sessionStorage.setItem('firstName','John'); sessionStorage.setItem('lastName','Smith'); document.querySelector('.show').innerHTML='จัดเก็บชื่อสำเร็จ'; } function display(){ var firstName=sessionStorage.getItem('firstName'); var lastName=sessionStorage.getItem('lastName'); document.querySelector('.show').innerHTML='ชื่อที่จัดเก็บใน sessionStorage คือ: '+ firstName +' '+lastName; } </script> </body> </html>
ผลลัพธ์
คลิกปุ่ม จัดเก็บชื่อ 'John Smith' ไปยัง sessionStorage เพื่อจัดเก็บชื่อไปยัง sessionStorage −
จากนั้นคลิกปุ่ม แสดงค่าที่จัดเก็บใน sessionStorage เพื่อแสดงค่าที่จัดเก็บ −
คุณยังสามารถเปิด session storage ในเครื่องมือพัฒนาของคุณเพื่อเข้าใจการทำงาน −
