نظرًا للحد من حجم وتنسيق وتنسيق بيانات التخزين لعصر HTML4 ، إذا كان تطبيق الموقع يريد تخزين جزء من المعلومات الموجودة على المتصفح ، فلا يمكن استخدامه إلا لاستخدام ملفات تعريف الارتباط. ومع ذلك ، فإن هذه القيود المفروضة على ملفات تعريف الارتباط تؤدي أيضًا إلى بيانات بسيطة مثل ملفات تعريف الارتباط يمكنها فقط تخزين بعض المعرفات مثل IDS.
فيما يلي تقييد ملفات تعريف الارتباط:
تدعم معظم المتصفحات ملف تعريف الارتباط بحد أقصى 4096 بايت.
يحد المتصفح أيضًا من عدد ملفات تعريف الارتباط المخزنة على كمبيوتر المستخدم. تسمح معظم المتصفحات فقط لكل موقع بتخزين 20 ملف تعريف الارتباط ؛
ستقدم بعض المتصفحات أيضًا قيودًا مطلقة على إجمالي عدد ملفات تعريف الارتباط التي ستقبلها من جميع المواقع ، وعادة ما تكون 300.
سيتم إرسال الموقف الافتراضي ل Cookie إلى خادم الخلفية مع طلب HTTP ، ولكن لا تتطلب جميع الطلبات ملفات تعريف الارتباط ، مثل: JS ، CSS ، الصور والطلبات الأخرى لا تتطلب ملف تعريف الارتباط.
من أجل كسر سلسلة من القيود المفروضة على ملفات تعريف الارتباط ، يمكن لـ HTML5 تخزين كمية كبيرة من البيانات مباشرة إلى متصفح العميل من خلال واجهة برمجة التطبيقات الجديدة من JS ، ويدعم قواعد البيانات المحلية المعقدة لجعل JS أكثر كفاءة. يدعم HTML5 نوعين من WebStorage:
هناك نوعان من واجهات برمجة التطبيقات المخزنة في H5 ، واحد هو تخزين الويب ، والآخر هو الويب SQL. بغض النظر عن أي واحد يعتمد على لغة JavaScript ، سأعلمك كيفية استخدام تخزين الويب
3. تخزين الويبيعرّف HTML5 تخزين الويب المحلي للتخزين ، ويوفر نوعين تخزين من API: SessionStorage و LocalStorage.
1. تم تخزين LocalStorage محليًا ، وتخزين البيانات دائمًا. بعد الثانية أو الثانية أو العام المقبل ، لا تزال البيانات متوفرة.الميزات: ① الحفظ الآمن والدائم في المجال. أي أن جميع الصفحات من نفس اسم المجال في العميل أو المتصفح يمكنها الوصول إلى بيانات LocalStorage ويتم حفظ البيانات بشكل دائم باستثناء الحذف ، ولكن البيانات بين العميل أو المتصفح مستقلة عن بعضها البعض.
② لن يتم إرسال البيانات إلى خادم الخلفية مع طلب HTTP ؛
③ لا تفكر في فرصة لبيانات التخزين ، لأن المتصفح مطلوب لدعم 4 ميجابايت على الأقل في معيار HTML5.
انظر إلى مثال:
الرمز كما يلي:
وظيفة clickcounter () {ifof (typeof (storage)! == undefined) {if (localStorage.ClickCount) {localStorage.ClickCount = number (localstorage.cl ickcount) +1 ؛} آخر {localstorage.clickcount = 1 ؛}. getElementById (نتيجة) .innerhtml = لقد قمت بالفعل بالنقر فوق الزر + localStorage.ClickCount + Times ؛} آخر {document.getElementById (result) .innerhtml = آسف ، لا يدعم متصفحك تخزين الويب. ؛}} </script> <p> <button onClick = clickCounter () type = button> انقر فوق! </utton> </p> <div id = result> </viv> <p> انقر فوق الزر لعرض زيادة العداد. </p> <p> قم بإيقاف تشغيل علامة التبويب المتصفح (أو النافذة) ، وإعادة فتح هذه الصفحة ، وسيستمر العداد في العد (وليس إعادة تعيين). </p> 2.SessionStorage فعال أثناء الجلسة ، ويتم حذف البيانات تلقائيًا بعد إغلاق المتصفح ؛الميزات: التحكم في الجلسة ، الحفاظ على المدى القصير. يشبه مفهوم الجلسة مفهوم الجلسة لجانب الخادم.
التوافق
ملاحظة: لا يدعم IE9 LocalStorage الملفات المحلية.
في الوقت الحالي ، تدعم جميع المتصفحات الرئيسية ميزات تخزين الويب لـ HTML5 إلى حد ما. كما يتضح من الشكل أعلاه ، دعمت جميع المتصفحات الحديثة تخزين الويب بشكل أساسي.
تدعم منصة Android والمتصفحات المعنية في منصة iOS أساسًا خصائص التخزين المحلية لتخزين الويب. تعد الأجهزة المحمولة الحالية في السوق ، بالإضافة إلى هواتف Android و iPhone ، أكثر وأكثر قرصًا ، وتعتمد بشكل أساسي على منصرين. باستخدام تخزين الويب على محطة الهاتف المحمول ، بالكاد نحتاج إلى التفكير فيما إذا كان المتصفح مدعومًا.
فيما يلي طريقة الكشف:
if (window.localStorage) {// browser يدعم LocalStorage} آخر {// لا يدعم} if (window.sessionstorage) {// يدعم المتصفح SessionStorage} آخر {// لا يدعم}} 3. محليAPI LocalStorage في HTML5 هو نفسه SessionStorage. نحن نأخذ LocalStorage كمثال ، نقدم بإيجاز التخزين المحلي لـ HTML5 ، ونقدم بعض الأمثلة للمشاكل الشائعة مثل اجتياز. LocalStorage هو API مخزنة محليًا في HTML5. المستعرضات المختلفة لها دعم مختلف لواجهة برمجة التطبيقات ، مثل طرق الاستخدام ، ومساحة التخزين القصوى ، إلخ.
طريقة التخزين: سلسلة التخزين بطريقة مفتاح. التطبيقات الرئيسية: عربات التسوق ، تسجيل الدخول إلى العملاء ، أرشيف اللعبة. جوهر جوهر أنواع البيانات المحجوزة: صفيف ، صور ، json ، النمط ، السيناريو. جوهر جوهر (طالما أنه يمكن تسلسله في محتوى سلسلة ، يمكن تخزينه) عنوان التخزين: c:/user محرك ج.يوفر LocalStorage أربع طرق لمساعدتنا في أداء العمليات ذات الصلة على التخزين المحلي.
(1) LocalStorage.SetItem (اسم المفتاح ، قيمة المفتاح) تخزين بيانات نوع السلسلة على العميل المحلي. أن قيمة ذلك هي أن قيمة ذلك هي أن قيمة المعلمة هي أن قيمة هذه البيانات نفسها. يحب:
تم تسمية بيانات LocalStorage.SetItem (Zhang SAN) ؛ القيمة الرئيسية لـ 28 بيانات.
(2) LocalStorage.getItem (اسم المفتاح) اقرأ البيانات التي تم تخزينها في المنطقة المحلية ، وقراءة بيانات اسم المفتاح المقابلة من خلال اسم المفتاح كمعلمة. يحب:
var data = localstorage.getItem (name) ؛
(3) LocalStorage.RemoveItem (اسم المفتاح) قم بإزالة البيانات التي تم تخزينها في المنطقة المحلية ، وحذف بيانات اسم المفتاح المقابلة من خلال اسم المفتاح كمعلمة. يحب:
var data2 = localstorage.RemoveItem (name) ؛
(4) localstorage.clear () قم بإزالة جميع البيانات المخزنة محليًا. يحب:
localstorage.clear () قم بإزالة جميع البيانات المخزنة محليًا. مثل: localstorage.clear () ؛
(5) بالإضافة إلى ذلك ، فإن الوظائف الأربع في SessionStorage هي في الأساس نفس استخدام وظيفة فئة LocalStorage أعلاه ، والتي لن يتم شرحها بالتفصيل.
فيما يلي مثال صغير:
<script = text/javaScript> localStore. تحقق () .3. استراتيجية انتهاء صلاحية LocalStorage
نظرًا لأن HTML5 لا تحدد استراتيجية انتهاء الصلاحية للتخزين المحلي ، يمكنك كتابة برنامج استراتيجية انتهاء الصلاحية الخاصة بك عند معالجة استراتيجية انتهاء صلاحية بيانات معالجة البيانات ، على النحو التالي:
<! TITLE> </head> <body> </body> </html> <script> مجموعة الوظائف (المفتاح ، القيمة) : القيمة ، الوقت: curtime})) ؛ "النتائج: json.parse (STR) وكالة الكائن: 23 الاسم: Huangxiaojian __proto__: كائن ملاحظة: يتم كتابة علامات اقتباس واحدة باستثناء {} ، يجب أن يكون كل اسم سمة اقتباسًا مزدوجًا. يتم استخدام json.stringify () لحل السلسلة من كائن ، مثل var a = {a: 1 ، b: 2} النتيجة: json.stringify (a) {a: 1 ، b: 2} */} الدالة الحصول على (exp) (تاريخ جديد (تاريخ جديد). انتهاء الصلاحية} {Console.العملية كما هو موضح في الشكل أدناه:
ما سبق هو كل محتويات هذا المقال.