คำอธิบายโดยละเอียดของ H5 Local Storage Web Storage

1. พื้นหลังการจัดเก็บในท้องถิ่น

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

ต่อไปนี้เป็นข้อ จำกัด ของคุกกี้:

เบราว์เซอร์ส่วนใหญ่รองรับคุกกี้ด้วยไบต์สูงสุด 4096 ไบต์

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

เบราว์เซอร์บางตัวจะมีข้อ จำกัด อย่างแน่นอนเกี่ยวกับจำนวนคุกกี้ทั้งหมดที่พวกเขาจะยอมรับจากทุกไซต์โดยปกติจะ 300

สถานการณ์เริ่มต้นของคุกกี้จะถูกส่งไปยังเซิร์ฟเวอร์พื้นหลังด้วยคำขอ HTTP แต่ไม่จำเป็นต้องมีคำขอทั้งหมดเช่น: JS, CSS, รูปภาพและคำขออื่น ๆ ไม่จำเป็นต้องใช้คุกกี้

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

1. การจัดเก็บพื้นที่ท้องถิ่น
2. SessionStorage ที่ระดับเซสชัน

ประการที่สองการจำแนกประเภทของที่เก็บข้อมูลในท้องถิ่น

มี API สองตัวที่เก็บไว้ใน H5 หนึ่งคือที่เก็บข้อมูลเว็บและอื่น ๆ คือ Web SQL ไม่ว่าอันไหนจะใช้ภาษา JavaScript ฉันจะสอนวิธีการใช้ที่เก็บข้อมูลเว็บ

3. การจัดเก็บเว็บ

HTML5 กำหนดพื้นที่จัดเก็บเว็บมาตรฐานในท้องถิ่นและจัดให้มีสองประเภทที่เก็บข้อมูลของ API: SessionStorage และ LocalStorage

1. LocalStorage ได้รับการจัดเก็บไว้ในเครื่องและการจัดเก็บข้อมูลเป็นแบบถาวร หลังจากปีที่สองสองหรือปีหน้าข้อมูลยังคงมีอยู่

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

②ข้อมูลจะไม่ถูกส่งไปยังเซิร์ฟเวอร์พื้นหลังด้วยคำขอ HTTP

③อย่าพิจารณาโอกาสสำหรับข้อมูลการจัดเก็บเนื่องจากเบราว์เซอร์จะต้องรองรับอย่างน้อย 4MB ในมาตรฐาน HTML5

ดูตัวอย่าง:

รหัสมีดังนี้:

 ฟังก์ชั่น clickcounter () {ifof (typeof (storage)! == undefined) {ถ้า (localstorage.clickcount) {localstorage.clickcount = number (localstorage.cl ickcount) +1;} อื่น {localstorage.clickcount = 1;} เอกสาร GetElementById (ผลลัพธ์) .innerhtml = คุณได้คลิกปุ่ม + localstorage.clickcount + times;} else {document.getElementById (ผลลัพธ์) .innerhtml = ขออภัยเบราว์เซอร์ของคุณไม่รองรับการจัดเก็บเว็บ ;}} </script> <p> <ปุ่ม onclick = clickcounter () type = button> คลิกฉัน! </button> </p> <div id = ผลลัพธ์> </div> <p> คลิกปุ่มเพื่อดูการเพิ่มตัวนับ </p> <p> ปิดแท็บเบราว์เซอร์ (หรือหน้าต่าง) เปิดหน้านี้อีกครั้งตัวนับจะยังคงนับต่อไป (ไม่รีเซ็ต) </p>

2.SessionStorage มีผลในระหว่างเซสชันและข้อมูลจะถูกลบโดยอัตโนมัติหลังจากปิดเบราว์เซอร์

คุณสมบัติ: การควบคุมเซสชันการเก็บรักษาระยะสั้น แนวคิดของเซสชันนั้นคล้ายคลึงกับแนวคิดเซสชันของฝั่งเซิร์ฟเวอร์

ความเข้ากันได้

หมายเหตุ: IE9 LocalStorage ไม่รองรับไฟล์ท้องถิ่น

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

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

ต่อไปนี้เป็นวิธีการตรวจจับ:

 if (window.localstorage) {// เบราว์เซอร์รองรับ localStorage} else {// ไม่รองรับ} ถ้า (window.sessionStorage) {// เบราว์เซอร์รองรับเซสชัน Storage} else {// ไม่รองรับ}}

3. LocalStorage

LocalStorage ในพื้นที่เก็บข้อมูลท้องถิ่นของ HTML5 นั้นเหมือนกับ SessionStorage เราใช้ตัวอย่างท้องถิ่นเป็นตัวอย่างแนะนำการจัดเก็บ HTML5 ในท้องถิ่นสั้น ๆ และทำตัวอย่างสำหรับปัญหาทั่วไปเช่น Traversal LocalStorage เป็น API ที่เก็บไว้ในท้องถิ่นใน HTML5 เบราว์เซอร์ที่แตกต่างกันมีการสนับสนุน API ที่แตกต่างกันเช่นวิธีการใช้งานพื้นที่เก็บข้อมูลสูงสุด ฯลฯ

วิธีการจัดเก็บ: สตริงการจัดเก็บในลักษณะคีย์-ค่า

แอปพลิเคชั่นหลัก: ตะกร้าสินค้าการเข้าสู่ระบบลูกค้าการเก็บถาวรเกม แก่นแท้ แก่นแท้

ประเภทข้อมูลที่สงวนไว้: อาร์เรย์, รูปภาพ, JSON, สไตล์, สคริปต์ แก่นแท้ แก่นแท้ (ตราบใดที่มันสามารถทำให้เป็นอนุกรมในเนื้อหาสตริงก็สามารถเก็บไว้ได้)

ที่เก็บที่อยู่: C:/ผู้ใช้/15014/AppData/local/Google/Chrome/ผู้ใช้ข้อมูล/ที่เก็บข้อมูลเริ่มต้น/ท้องถิ่น (คอมพิวเตอร์ที่แตกต่างกันคุณต้องเปิดการแสดงไฟล์ที่ซ่อนอยู่ แต่คุณสามารถค้นหาโฟลเดอร์นี้เพื่อค้นหา LocalStorage On ไดรฟ์ C

LocalStorage มีวิธีการสี่วิธีเพื่อช่วยให้เราดำเนินการที่เกี่ยวข้องกับที่เก็บข้อมูลในท้องถิ่น

(1) localstorage.setItem (ชื่อคีย์, ค่าคีย์) จัดเก็บข้อมูลประเภทสตริงบนไคลเอนต์ท้องถิ่น ค่าของสิ่งนี้คือค่าของสิ่งนี้คือค่าของสิ่งนี้คือค่าของพารามิเตอร์คือค่าของข้อมูลนี้ ชอบ:

 localstorage.setItem (ชื่อ, Zhang San); ค่าคีย์ของ 28 ข้อมูล

(2) localstorage.getItem (ชื่อคีย์) อ่านข้อมูลที่เก็บไว้ในพื้นที่ท้องถิ่นและอ่านข้อมูลชื่อคีย์ที่เกี่ยวข้องผ่านชื่อคีย์เป็นพารามิเตอร์ ชอบ:

 ข้อมูล var = localstorage.getItem (ชื่อ);

(3) localstorage.removeitem (ชื่อคีย์) ลบข้อมูลที่เก็บไว้ในพื้นที่ท้องถิ่นและลบข้อมูลชื่อคีย์ที่เกี่ยวข้องผ่านชื่อคีย์เป็นพารามิเตอร์ ชอบ:

 var data2 = localstorage.removeitem (ชื่อ);

(4) localstorage.clear () ลบข้อมูลทั้งหมดที่เก็บไว้ในเครื่อง ชอบ:

 localstorage.clear () ลบข้อมูลทั้งหมดที่เก็บไว้ในเครื่อง เช่น: localstorage.clear ();

(5) นอกจากนี้ฟังก์ชั่นทั้งสี่ใน SessionStorage นั้นเหมือนกับการใช้ฟังก์ชันของคลาส LocalStorage ด้านบนซึ่งจะไม่อธิบายอย่างละเอียด

ต่อไปนี้เป็นตัวอย่างเล็ก ๆ :

 <สคริปต์ประเภท = ข้อความ/javascript> localstorage.setItem (ชื่อ, Zhang San); ตรวจสอบ (); .getItem (อายุ);

3. กลยุทธ์การหมดอายุของ LocalStorage

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

 <! ชื่อเรื่อง> </head> <body> </body> </html> <script> ชุดฟังก์ชั่น (คีย์, ค่า) {varcurtime = วันที่ใหม่ () : ค่า, เวลา: curtime})); 'ผลลัพธ์: JSON.Parse (STR) Object Agency: 23 ชื่อ: Huangxiaojian __proto__: วัตถุหมายเหตุ: คำพูดเดียวถูกเขียนในยกเว้น {} ชื่อแอตทริบิวต์แต่ละชื่อจะต้องเป็นคำพูดคู่ json.stringify () ใช้เพื่อแก้ไขสตริงจากวัตถุเช่น var a = {a: 1, b: 2} ผลลัพธ์: json.stringify (a) {a: 1, b: 2} */} ฟังก์ชัน รับ (คีย์, exp) // exp เป็นเวลาหมดอายุของการตั้งค่า {var value = localstorage.getItem (คีย์); (วันที่ใหม่ (วันที่ใหม่) () .getTime () -dataobj.time> exp) // ถ้าเวลาปัจจุบัน -minus องค์ประกอบการจัดเก็บที่ตั้งไว้ในเวลาของการสร้าง> เวลาหมดอายุ {console.log (หมดอายุ); การหมดอายุที่รวดเร็ว} else {คอนโซล

การดำเนินการดังแสดงในรูปด้านล่าง:

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้