بما أن HTTP عديم الجنسية، فمن أنت؟ ماذا فعلت؟ عذرًا، الخادم لا يعرف.
وهكذا تظهر الجلسة التي تقوم بتخزين معلومات المستخدم على الخادم لاستخدامها في المستقبل (مثل اسم المستخدم، ومشتريات عربة التسوق، وما إلى ذلك).
لكن الجلسة مؤقتة وسيتم حذفها عندما يغادر المستخدم الموقع. إذا كنت تريد تخزين المعلومات بشكل دائم، يمكنك حفظها في قاعدة بيانات!
كيف تعمل الجلسة: أنشئ معرف جلسة (أساسي!!!) لكل مستخدم. يتم تخزين معرف الجلسة في ملف تعريف الارتباط، مما يعني أنه إذا قام المتصفح بتعطيل ملفات تعريف الارتباط، فستصبح الجلسة غير صالحة! (ولكن يمكن تحقيق ذلك بطرق أخرى، مثل تمرير معرف الجلسة عبر عنوان URL)
تستخدم مصادقة المستخدم بشكل عام الجلسة.
ملفات تعريف الارتباط:الغرض: البيانات المخزنة محليًا على جانب العميل (عادةً ما تكون مشفرة) لموقع ويب للتعرف على المستخدم.
سيتم نقل ملف تعريف الارتباط (حتى لو لم تكن هناك حاجة إليه) في طلب http من نفس الأصل، أي أنه سيتم تمريره ذهابًا وإيابًا بين العميل والخادم!
حجم بيانات ملف تعريف الارتباط لا يتجاوز 4K
فترة صلاحية ملفات تعريف الارتباط: فترة صلاحية ملفات تعريف الارتباط المحددة صالحة حتى وقت انتهاء الصلاحية، حتى لو كان المتصفح مغلقًا!
التخزين المحلي وتخزين الجلسة:في الأيام الأولى، كانت ملفات تعريف الارتباط شائعة الاستخدام للتخزين المؤقت المحلي، ولكن تخزين الويب يجب أن يكون أكثر أمانًا وأسرع!
لا يتم حفظ هذه البيانات على الخادم (مخزنة على العميل) ولا تؤثر على أداء الخادم!
تخزين بيانات sessionStorage وlocalStorage لها أيضًا حدود للحجم، ولكنها أكبر بكثير من ملفات تعريف الارتباط ويمكن أن تصل إلى 5 ملايين أو أكبر!
LocalStorage: تخزين البيانات دون حد زمني!
sessionStorage: كما يتبين من المعنى الإنجليزي، فهو مخزن بيانات الجلسة، لذلك بعد أن يغلق المستخدم المتصفح (علامة التبويب/النافذة)، يتم حذف البيانات!
دعم تخزين الويب بتنسيق HTML5:IE8 أو أعلى، متصفح حديث.
يتم تخزين البيانات في أزواج القيمة الرئيسية:
لدى كل من localStorage و sessionStorage الطرق التالية:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>تخزين الويب</title></head><body> <div id=test></div> <script> if (typeof (Storage) != undef) { localStorage.name = 'xiao ming'; أولاً: + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log(first: + localStorage.name1); console.log(third: + localStorage.getItem('name')); console.log(last: + localStorage.name)); document.getElementById('test').innerHTML = قم بتحديث متصفحك! المتصفح لا يدعم التخزين حاليًا } </script></body></html>نتائج تشغيل البرنامج:
ملاحظة: يتم تخزين أزواج القيمة الرئيسية كسلاسل، ويجب تغيير النوع وفقًا للمتطلبات (على سبيل المثال، للإضافة، التغيير إلى نوع الرقم).
ذاكرة التخزين المؤقت لتطبيق HTML5:من خلال إنشاء ملف بيان ذاكرة التخزين المؤقت، يمكن تخزين تطبيقات الويب مؤقتًا والوصول إليها دون اتصال بالشبكة!
مزايا ذاكرة التخزين المؤقت للتطبيق:1. التصفح دون اتصال بالإنترنت؛
2. سرعة أكبر: يتم تحميل الموارد المخزنة مؤقتًا بشكل أسرع؛
3. تقليل تحميل المتصفح: سيقوم العميل فقط بتنزيل أو تحديث الموارد التي تم تغييرها من الخادم
حالة الدعم:
IE10 أو أعلى، متصفح حديث.
يستخدم:
<!DOCTYPE html><html Manifest=demo.appcache></html>
ملاحظة: لتمكين ذاكرة التخزين المؤقت للتطبيق، تحتاج إلى تحديد سمة البيان (الامتداد: .appcache)؛ إذا لم يتم تحديد سمة البيان، فلن يتم تخزين الصفحة مؤقتًا (ما لم يتم تحديد الصفحة مباشرة في ملف البيان!)
يجب تكوين ملف البيان بشكل صحيح باستخدام نوع MIME: text/cache-manifest على الخادم.
ملف البيان:البيان عبارة عن ملف نصي بسيط يخبر المتصفح بما تم تخزينه مؤقتًا وما لم يتم تخزينه مؤقتًا!
ويمكن تقسيم البيان إلى ثلاثة أجزاء:بيان ذاكرة التخزين المؤقت: سيتم تخزين الملفات المدرجة هنا مؤقتًا بعد التنزيل الأول!
الشبكة: تتطلب الملفات المدرجة في هذا العنصر اتصالاً بالشبكة مع الخادم ولن يتم تخزينها مؤقتًا!
الرجوع: يسرد هذا العنصر الصفحة الاحتياطية عندما لا يمكن الوصول إلى الصفحة (مثل: صفحة 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. تم تغيير ملف البيان (#: يشير إلى تعليق، وإذا تم تغييره إلى #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, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>عامل الويب</title></head><body> <p>العدد: <output id=count></output></p> <button onclick=startWorker()>ابدأ</button> <button onclick=overWorker()>End</button> <script> var w function startWorker(){ // تحقق مما إذا كان المتصفح يدعم عامل الويب if(typeof(Worker) !=='undef'){ if(typeof(w)=='undef'){ // إنشاء كائن عامل الويب w=new Worker('testWorker.js'); يستمر الاستماع إلى الحدث (حتى لو اكتمل البرنامج النصي الخارجي) ما لم يتم إنهاؤه w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data }; }else{ document.getElementById ('count' ).innerHTML='المتصفح لا يدعم عمال الويب'; } } function overWorker() { // إنهاء الويب كائن العامل، يطلق موارد المتصفح/الكمبيوتر w.terminate(); w=undef } </script></body></html>ملف testWorker.js:
var i=0;function timedCount() { i+=1; // الجزء المهم، قم بإرجاع جزء من المعلومات إلى صفحة html postMessage(i);ملاحظة 1: عادة لا يتم استخدام عمال الويب لمثل هذه المهام البسيطة، ولكن للمهام التي تستهلك المزيد من موارد وحدة المعالجة المركزية!
ملاحظة 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, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>الحدث المرسل قطعًا</title></head><body> <p>معلومات الحدث المرسل قطعًا</p> <div id=test></div> <script> // تحديد ما إذا كان المتصفح يدعم EventSource if(typeof(EventSource)!==undef){ // إنشاء كائن EventSource var source=new EventSource(test.php); الاستماع للحدث source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> } }else{ document.getElementById('test').innerHTML=عذرًا، المتصفح لا يدعم الحدث المرسل من الخادم؛ } </script></body></html>اختبار.php:
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');بيانات الصدى:وقت الخادم هو: {$ time} /n/n;// تحديث بيانات الإخراج Flush();ملاحظة: لا يوجد أي محتوى، يمكن حذف ملف php؟> إغلاق!
HTML5 ويبسوكيت:يمكن استخدام WebSocket للتواصل بين علامات تبويب متعددة!
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.