ฟังก์ชั่นการจัดเก็บในเครื่องที่จัดทำโดย HTML5 ช่วยให้เว็บแอปพลิเคชันสามารถจัดเก็บข้อมูลในเบราว์เซอร์ในเครื่องของผู้ใช้ ใน HTML5 ข้อมูลจะไม่ถูกส่งผ่านโดยทุกคำขอของเซิร์ฟเวอร์ แต่ข้อมูลจะถูกใช้เมื่อมีการร้องขอเท่านั้น ทำให้สามารถจัดเก็บข้อมูลจำนวนมากได้โดยไม่กระทบต่อประสิทธิภาพของเว็บไซต์
มีสองวิธีในการจัดเก็บบนฝั่งไคลเอ็นต์:
1. localStorage: พื้นที่จัดเก็บข้อมูลที่ไม่จำกัดเวลาและความจุขนาดใหญ่ ขนาดอย่างน้อย 5M ทุกหน้าที่มีชื่อโดเมนเดียวกันสามารถจัดเก็บและรับข้อมูลเดียวกันได้
2. sessionStorage: สำหรับการจัดเก็บข้อมูลของเซสชัน แท็บจะหายไปเมื่อปิด
ปัจจุบันเบราว์เซอร์ส่วนใหญ่รองรับ HTML5 เป็นอย่างดีอยู่แล้ว แต่เพื่อความปลอดภัย ควรตรวจสอบไคลเอ็นต์ก่อนใช้งาน:
if (typeof(Storage) !== undefinition) { // รหัสสำหรับ localStorage/sessionStorage.} else { // ขออภัย! ไม่รองรับ Web Storage..}เหตุผลที่ฉันใช้ฟังก์ชันนี้เนื่องจากฉันกำลังทำงานกับเว็บไซต์ที่ใช้ข้อมูล ฉันต้องส่งพารามิเตอร์การสืบค้นไปยังแบ็กเอนด์ผ่านอินเทอร์เฟซ API และรับข้อมูลที่ส่งคืนจากฐานข้อมูล มีปัญหาที่นี่ ฉันต้องการข้ามจากหน้า a ไปยังหน้า b แล้วเรียกอินเทอร์เฟซ API บนหน้า b เพื่อส่งข้อมูลพารามิเตอร์ไปยังพื้นหลังและรับข้อมูลพารามิเตอร์บนหน้า a ฉันจะโอนหน้า a ไปยังหน้า a ได้อย่างไร แล้วการส่งค่าที่สร้างขึ้นไปยังหน้า b ล่ะ
สมมติว่าค่าและรูปแบบข้อมูลที่เราต้องการส่งไปยังพื้นหลังคือ: {unitGroup:[一年级,二年级,三年级];
จากนั้นหลังจากเพจ a สร้างข้อมูลที่ unitGroup ที่เราต้องการ ให้ใช้ sessionStorage:
ถ้า (typeof (ที่เก็บข้อมูล) !== ไม่ได้กำหนด) { sessionStorage[unitGroup] = data.unit.value;} else { sessionStorage[unitGroup] = '';}จากนั้นในหน้า b คุณสามารถอ่านได้ผ่านคำสั่งต่อไปนี้:
var unit_group = '';if (typeof(Storage) !== ไม่ได้กำหนด) { var myunits = sessionStorage[unitGroup]; unit_group = myunits.split(,);}จากนั้นคุณสามารถเรียก ajax เพื่อส่งข้อมูลไปยังพื้นหลังได้:
var newData = {unitGroup: unit_group};ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network