HTML5 - ที่เก็บข้อมูลบนเว็บ

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

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

การจัดเก็บทั้งสองคือ session storage และ local storage และจะใช้เพื่อจัดการกับสถานการณ์ต่างๆ

เบราว์เซอร์ทุกเวอร์ชันล่าสุดรองรับ HTML5 Storage รวมถึง Internet Explorer

พื้นที่จัดเก็บเซสชัน

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

ตัวอย่าง

ตัวอย่างเช่นหากผู้ใช้ซื้อตั๋วเครื่องบินในสองหน้าต่างที่แตกต่างกันโดยใช้ไซต์เดียวกัน หากไซต์ใช้คุกกี้เพื่อติดตามว่าผู้ใช้ซื้อตั๋วใดจากนั้นเมื่อผู้ใช้คลิกจากหน้าหนึ่งไปอีกหน้าหนึ่งในทั้งสองหน้าต่างตั๋วที่ซื้อในปัจจุบันจะ "รั่วไหล" จากหน้าต่างหนึ่งไปยังอีกหน้าต่างหนึ่งซึ่งอาจทำให้ผู้ใช้ ซื้อตั๋วสองใบสำหรับเที่ยวบินเดียวกันโดยไม่ต้องสังเกตจริงๆ

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

ต่อไปนี้เป็นรหัสที่จะตั้งค่าตัวแปรเซสชันและเข้าถึงตัวแปรนั้น -

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ที่เก็บข้อมูลในเครื่อง

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

อีกครั้งคุกกี้ไม่สามารถจัดการกับกรณีนี้ได้ดีเนื่องจากมีการส่งคำขอทุกครั้ง

ตัวอย่าง

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

ต่อไปนี้เป็นรหัสที่จะตั้งค่าตัวแปรการจัดเก็บในเครื่องและเข้าถึงตัวแปรนั้นทุกครั้งที่เข้าถึงหน้านี้แม้ในครั้งต่อไปเมื่อคุณเปิดหน้าต่าง -

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

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

การจัดเก็บข้อมูลที่ละเอียดอ่อนบนเครื่องในพื้นที่อาจเป็นอันตรายและอาจทำให้เกิดช่องโหว่ด้านความปลอดภัย

เซสชันการจัดเก็บข้อมูลจะถูกลบออกจากเบราว์เซอร์ได้ทันทีหลังจากที่เซสชั่นได้รับการยกเลิก

หากต้องการล้างการตั้งค่าการจัดเก็บในเครื่องคุณจะต้องโทร localStorage.remove('key'); โดยที่ 'คีย์' คือคีย์ของค่าที่คุณต้องการลบ หากต้องการล้างการตั้งค่าทั้งหมดคุณต้องโทรlocalStorage.clear() วิธี.

ต่อไปนี้เป็นรหัสที่จะล้างการจัดเก็บในเครื่องที่สมบูรณ์ -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -