เนื่องจาก HTTP เป็นสถานะไร้สัญชาติ คุณเป็นใคร? คุณทำอะไร? ขออภัย เซิร์ฟเวอร์ไม่ทราบ
เซสชันจะปรากฏขึ้น ซึ่งจะจัดเก็บข้อมูลผู้ใช้บนเซิร์ฟเวอร์เพื่อใช้ในอนาคต (เช่น ชื่อผู้ใช้ การซื้อในตะกร้าสินค้า ฯลฯ)
แต่เซสชันนี้เป็นเซสชันชั่วคราวและจะถูกลบเมื่อผู้ใช้ออกจากเว็บไซต์ หากคุณต้องการจัดเก็บข้อมูลอย่างถาวรก็สามารถบันทึกลงในฐานข้อมูลได้!
วิธีการทำงานของเซสชัน: สร้างรหัสเซสชัน (คอร์!!!) สำหรับผู้ใช้แต่ละคน รหัสเซสชันถูกจัดเก็บไว้ในคุกกี้ ซึ่งหมายความว่าหากเบราว์เซอร์ปิดใช้งานคุกกี้ เซสชันนั้นจะไม่ถูกต้อง! (แต่สามารถทำได้ด้วยวิธีอื่น เช่น การส่ง session id ผ่าน URL)
การตรวจสอบผู้ใช้โดยทั่วไปจะใช้เซสชัน
คุกกี้:วัตถุประสงค์: ข้อมูลที่จัดเก็บไว้ในฝั่งไคลเอ็นต์ (โดยปกติจะมีการเข้ารหัส) สำหรับเว็บไซต์เพื่อระบุตัวผู้ใช้
คุกกี้จะถูกนำไปใช้ (แม้ว่าจะไม่จำเป็นก็ตาม) ในคำขอ http จากแหล่งกำเนิดเดียวกัน นั่นคือส่งกลับไปกลับมาระหว่างไคลเอนต์และเซิร์ฟเวอร์!
ขนาดข้อมูลของคุกกี้ไม่เกิน 4k
ระยะเวลาความถูกต้องของคุกกี้: ระยะเวลาความถูกต้องของคุกกี้ที่ตั้งไว้จะใช้ได้จนถึงเวลาหมดอายุ แม้ว่าเบราว์เซอร์จะปิดแล้วก็ตาม!
localStorage & sessionStorage：ในช่วงแรกๆ คุกกี้มักใช้สำหรับการแคชในเครื่อง แต่ที่เก็บข้อมูลบนเว็บจำเป็นต้องปลอดภัยและรวดเร็วยิ่งขึ้น!
ข้อมูลนี้ไม่ได้ถูกบันทึกไว้บนเซิร์ฟเวอร์ (เก็บไว้ในไคลเอนต์) และไม่ส่งผลกระทบต่อประสิทธิภาพของเซิร์ฟเวอร์!
การจัดเก็บข้อมูล sessionStorage และ localStorage ก็มีขีดจำกัดขนาดเช่นกัน แต่มีขนาดใหญ่กว่าคุกกี้มากและสามารถเข้าถึงได้ถึง 5M หรือมากกว่านั้น!
localStorage: การจัดเก็บข้อมูลโดยไม่ จำกัด เวลา!
sessionStorage: ตามที่เห็นได้จากความหมายภาษาอังกฤษ มันเป็นที่จัดเก็บข้อมูลของเซสชัน ดังนั้นหลังจากที่ผู้ใช้ปิดเบราว์เซอร์ (แท็บ/หน้าต่าง) ข้อมูลจะถูกลบ!
รองรับที่เก็บข้อมูลเว็บ HTML5:IE8 หรือสูงกว่า เบราว์เซอร์สมัยใหม่
ข้อมูลจะถูกเก็บไว้ในคู่คีย์-ค่า:
ทั้ง localStorage และ sessionStorage มีเมธอดดังต่อไปนี้:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>ที่เก็บข้อมูลเว็บ</title></head><body> <div id=test></div> <script> if (typeof (ที่เก็บข้อมูล) != ไม่ได้กำหนด) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = คุณคือ: + localStorage.name; อันดับแรก: + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log (ที่สอง: + localStorage.name1); console.log (ที่สาม: + localStorage.getItem ('ชื่อ')); localStorage.clear (); console.log (สุดท้าย: + localStorage.name); document.getElementById('test').innerHTML = อัปเดตเบราว์เซอร์ของคุณ! ขณะนี้เบราว์เซอร์ไม่รองรับการจัดเก็บ; } </script></body></html>ผลการรันโปรแกรม:
หมายเหตุ: คู่คีย์-ค่าจะถูกจัดเก็บเป็นสตริง และควรเปลี่ยนประเภทตามความต้องการ (เช่น หากต้องการเพิ่ม ให้เปลี่ยนเป็นประเภทตัวเลข)
แคชแอปพลิเคชัน HTML5:ด้วยการสร้างไฟล์รายการแคช เว็บแอปพลิเคชันสามารถแคชและเข้าถึงได้โดยไม่ต้องเชื่อมต่อเครือข่าย!
ข้อดีของแคชแอปพลิเคชัน:1. การเรียกดูแบบออฟไลน์
2. ความเร็วที่เร็วขึ้น: ทรัพยากรที่แคชไว้จะถูกโหลดเร็วขึ้น
3. ลดภาระของเบราว์เซอร์: ไคลเอนต์จะดาวน์โหลดหรืออัปเดตทรัพยากรที่เปลี่ยนแปลงจากเซิร์ฟเวอร์เท่านั้น
สถานะการสนับสนุน:
IE10 หรือสูงกว่า เบราว์เซอร์สมัยใหม่
ใช้:
<!DOCTYPE html><html manifest=demo.appcache></html>
หมายเหตุ: หากต้องการเปิดใช้งานแคชของแอปพลิเคชัน คุณจะต้องระบุแอตทริบิวต์รายการ (นามสกุล: .appcache) หากไม่ได้ระบุแอตทริบิวต์รายการ เพจจะไม่ถูกแคช (เว้นแต่ว่าเพจนั้นจะถูกระบุโดยตรงในไฟล์รายการ!)
ไฟล์ Manifest จะต้องได้รับการกำหนดค่าอย่างถูกต้องด้วยประเภท MIME: text/cache-manifest บนเซิร์ฟเวอร์
ไฟล์ Manifest:manifest เป็นไฟล์ข้อความธรรมดาที่บอกเบราว์เซอร์ว่าอะไรถูกแคชและอะไรไม่ถูกแคช!
รายการสามารถแบ่งออกเป็นสามส่วน:รายการแคช: ไฟล์ที่แสดงที่นี่จะถูกแคชหลังจากการดาวน์โหลดครั้งแรก!
เครือข่าย: ไฟล์ที่อยู่ในรายการนี้จำเป็นต้องมีการเชื่อมต่อเครือข่ายกับเซิร์ฟเวอร์และจะไม่ถูกแคช!
FALLBACK: รายการนี้แสดงรายการหน้าทางเลือกเมื่อไม่สามารถเข้าถึงเพจได้ (เช่น: หน้า 404)!
ทดสอบ appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/เมื่อไม่สามารถเข้าถึงไฟล์ในไดเร็กทอรี ให้ใช้ /offline.html แทน /html/ / ออฟไลน์.htmlอัปเดตแคชแอปพลิเคชัน:
1. ผู้ใช้ล้างแคชของเบราว์เซอร์!
2. ไฟล์ Manifest มีการเปลี่ยนแปลง (#: ระบุความคิดเห็น และหากเปลี่ยนเป็น #2018 1 1 v20.0.0 เบราว์เซอร์จะแคชอีกครั้ง!)
3. โปรแกรมอัพเดตแคชของแอปพลิเคชัน!
พนักงานเว็บ:พนักงานเว็บคือจาวาสคริปต์ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นอยู่กับสคริปต์อื่นๆ และจะไม่ส่งผลต่อประสิทธิภาพของเพจ!
เมื่อรันสคริปต์บนหน้า HTML ทั่วไป หน้านั้นจะไม่ตอบสนองเว้นแต่จะโหลดสคริปต์!
การสนับสนุน: IE10 หรือสูงกว่า เบราว์เซอร์สมัยใหม่
ตัวอย่าง: ไฟล์ html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>ผู้ปฏิบัติงานเว็บ</title></head><body> <p>นับ: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // ตรวจสอบว่าเบราว์เซอร์รองรับ web worker หรือไม่ if(typeof(Worker) !=='unknown'){ if(typeof(w)=='unknown'){ //สร้างวัตถุคนงานเว็บ w=new Worker('testWorker.js'); } // เหตุการณ์ยังคงได้รับการฟัง (แม้ว่าสคริปต์ภายนอกจะเสร็จสิ้นแล้ว) เว้นแต่จะยุติ w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data; }; ('count' ).innerHTML='เบราว์เซอร์ไม่รองรับการทำงานของเว็บ'; } } ฟังก์ชัน overWorker() { // ยุติการทำงานของเว็บ วัตถุผู้ปฏิบัติงาน เผยแพร่ทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ w.terminate(); w=unknown; } </script></body></html>ไฟล์ testWorker.js:
var i=0;function timedCount() { i+=1; //ส่วนสำคัญ ส่งคืนข้อมูลไปยังหน้า html postMessage(i); setTimeout('timedCount()',500);}timedCount();หมายเหตุ 1: โดยปกติแล้ว Web Worker จะไม่ถูกใช้สำหรับงานง่ายๆ เช่นนั้น แต่สำหรับงานที่ใช้ทรัพยากร CPU มากกว่า!
หมายเหตุ 2: การทำงานใน Chrome จะทำให้เกิดข้อผิดพลาด "ไม่สามารถเข้าถึงได้จากต้นกำเนิด 'null'" วิธีแก้ปัญหาของฉันคือ: เปิด apache ใน xampp และใช้ http://localhost/ เพื่อเข้าถึง
ข้อเสียของพนักงานเว็บ:เนื่องจากผู้ปฏิบัติงานเว็บอยู่ในไฟล์ภายนอก จึงไม่สามารถเข้าถึงวัตถุจาวาสคริปต์ต่อไปนี้:
เหตุการณ์ที่เซิร์ฟเวอร์ส่งเป็นการถ่ายโอนข้อมูลทางเดียว หน้าเว็บสามารถรับการอัปเดตจากเซิร์ฟเวอร์ได้โดยอัตโนมัติ!
ก่อนหน้านี้: ในตอนแรกหน้าเว็บจะถามว่ามีการอัพเดตหรือไม่ เซิร์ฟเวอร์ส่งข้อมูล และทำการอัปเดต (การถ่ายโอนข้อมูลแบบสองทาง)!
สถานะการสนับสนุน: เบราว์เซอร์สมัยใหม่ทั้งหมดยกเว้น IE รองรับ!
โค้ดตัวอย่าง: ไฟล์ html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>sever send event</title></head><body> <p>sever send event informations</p> <div id=test></div> <script> // ตรวจสอบว่าเบราว์เซอร์รองรับ EventSource if(typeof(EventSource)!==unknown){ // สร้างวัตถุ EventSource var source=new EventSource(test.php); // เหตุการณ์ Listen source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br>; }; document.getElementById('test').innerHTML=ขออภัย เบราว์เซอร์ไม่รองรับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง } </script></body></html>ทดสอบ.php：
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:เวลาของเซิร์ฟเวอร์คือ: {$ เวลา} /n/n;// รีเฟรชข้อมูลเอาต์พุต ล้าง ();หมายเหตุ: ไม่มีเนื้อหาอยู่เบื้องหลัง ไฟล์ php สามารถละเว้นได้หรือไม่> ปิด!
HTML5 เว็บซ็อกเก็ต:WebSocket สามารถใช้สำหรับการสื่อสารระหว่างหลายแท็บ!
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network