يمكن لتخزين البيانات على العميل حل العديد من المشكلات وتقليل نقل البيانات غير الضروري:
1. يمكن أن يحفظ حالة البرنامج: يمكن للمستخدم معرفة مكان عمله بعد إغلاق المتصفح وفتحه.
2. يمكن بيانات التخزين المؤقت: ليست هناك حاجة للحصول على الكثير من البيانات التي لن تتغير من الخادم في كل مرة.
3. يمكن أن يحفظ تفضيلات المستخدم: لا يحتاج هذا النوع من البيانات عادةً إلى الحضور على الخادم.
الممارسات السابقةقبل التخزين المحلي HTML5 ، إذا أردنا حفظ بيانات مستمرة على العميل ، فهناك العديد من الخيارات:
1. ملفات تعريف الارتباط HTTP. عيب ملفات تعريف الارتباط HTTP واضحة. يمكنهم فقط تخزين ما يصل إلى 4 كيلو بايت من البيانات ، وسيتم إعادة كل طلب HTTP إلى الخادم ونص عادي مرقل (ما لم تستخدم SSL).
2. أي userData. userData هو حل تخزين محلي أطلقته Microsoft خلال حرب المتصفح في التسعينيات. يستخدم سمة السلوك لـ DHTML لتخزين البيانات المحلية ، مما يسمح لكل صفحة بتخزين ما يصل إلى 64 ألف بيانات وما يصل إلى 640 ألف بيانات لكل موقع. عيوب userData واضحة. إنه ليس جزءًا من معيار الويب. ما لم يكن برنامجك يحتاج فقط إلى دعم IE ، فهو غير مجدي بشكل أساسي.
3. ملفات تعريف الارتباط فلاش. ملفات تعريف الارتباط فلاش ليست في الواقع مثل ملفات تعريف الارتباط HTTP. ربما يجب أن يكون اسمها فلاش التخزين المحلي. تسمح ملفات تعريف الارتباط الفلاش لكل موقع بتخزين البيانات لا يزيد عن 100 ألف افتراضيًا. إذا تجاوزها ، فسيطلب فلاش تلقائيًا مساحة تخزين أكبر من المستخدم. مع واجهة Flash الخارجية ، يمكنك بسهولة تشغيل التخزين المحلي لـ Flash من خلال JavaScript. مشكلة الفلاش بسيطة للغاية ، لأنها فلاش.
4. جوجل تروس. Gears هو مكون إضافي مفتوح المصدر للمتصفح الذي تم إصداره بواسطة Google في عام 2007 ، بهدف تحسين توافق المتصفحات الرئيسية. يحتوي Gears على قاعدة بيانات SQL مدمجة على أساس SQLite وتوفر واجهة برمجة تطبيقات موحدة للوصول إلى قاعدة البيانات. بعد الحصول على إذن المستخدم ، يمكن لكل موقع تخزين بيانات غير محدودة في قاعدة بيانات SQL. مشكلة Gears هي أن Google نفسها لم تعد تستخدمها.
مجموعة متنوعة رائعة من التقنيات تؤدي إلى مشاكل توافق المتصفح. قد تكون ملفات تعريف الارتباط الأكثر شيوعًا هنا هي ملفات تعريف الارتباط.
تجربة جديدة في HTML5استجابة للمشكلات المذكورة أعلاه ، يوفر HTML5 حلاً أكثر مثالية: إذا كنت بحاجة إلى تخزين البيانات التي يمكن حلها ببساطة باستخدام أزواج المفاتيح/القيمة ، فيمكنك استخدام تخزين الويب.
بالمقارنة مع ملفات تعريف الارتباط ، فإن تخزين الويب له العديد من المزايا ، ملخصة على النحو التالي:
1. مساحة تخزين أكبر: كل مساحة تخزين مستقلة تحت IE8 هي 10 أمتار ، والمتصفحات الأخرى لديها تطبيقات مختلفة قليلاً ، لكنها أكبر بكثير من ملفات تعريف الارتباط.
2. لن يتم إرسال المحتوى المخزن إلى الخادم: عند تعيين ملف تعريف الارتباط ، سيتم إرسال محتوى ملف تعريف الارتباط مع الطلب على الخادم ، وهو مضيعة لعرض النطاق الترددي للبيانات المخزنة محليًا. توجد البيانات في تخزين الويب محليًا فقط ولن تتفاعل مع الخادم.
3. واجهات أكثر ثراءً وسهلة الاستخدام: يوفر تخزين الويب مجموعة أكثر ثراءً من الواجهات ، مما يجعل تشغيل البيانات أسهل.
4. مساحة التخزين المستقلة: كل مجال (بما في ذلك نطاق فرعي) لديه مساحة تخزين مستقلة ، وكل مساحة تخزين مستقلة تمامًا ، لذلك لن يتسبب في ارتباك البيانات.
تصنيف تخزين الويبيتكون تخزين الويب فعليًا من جزأين: SessionStorage و LocalStorage.
يتم استخدام SessionStorage لتخزين البيانات في جلسة محليًا ، والتي لا يمكن الوصول إليها إلا على صفحات في نفس الجلسة وسيتم تدمير البيانات بعد الانتهاء من الجلسة. لذلك ، فإن SessionStorage ليس تخزينًا محليًا مستمرًا ، ولكن فقط تخزين على مستوى الجلسة.
يتم استخدام LocalStorage للتخزين المحلي المستمر ، ولن تنتهي البيانات أبدًا إلا إذا تم حذفها بنشاط.
تحقق مما إذا كان تخزين الويب مدعومًايتم دعم تخزين الويب في المتصفحات الرئيسية الرئيسية ، ولكن لكي تكون متوافقة مع المتصفحات القديمة ، ما زلنا بحاجة إلى التحقق مما إذا كان يمكن استخدام هذه التقنية.
الطريقة الأولى: تحقق مما إذا كان المتصفح يدعم تخزين الويب عن طريق التحقق مما إذا كان كائن التخزين موجودًا:
if (typeof (التخزين)! == "غير محدد") {
// نعم! LocalStorage و SessionStorage دعم!
// بعض الكود ...
} آخر {
// آسف! لا يوجد دعم تخزين الويب ..
}
الطريقة الثانية هي التحقق من الكائنات المعنية بشكل منفصل ، مثل التحقق مما إذا كان LocalStorage يدعمها:
if (typeof (localstorage) == 'undefined') {
التنبيه ("المستعرض الخاص بك لا يدعم HTML5 LocalStorage. جرب ترقية.") ؛
} آخر {
// نعم! LocalStorage و SessionStorage دعم!
// بعض الكود ...
}
أو:
if ('LocalStorage' in Window && window ['localstorage']! == null) {
// نعم! LocalStorage و SessionStorage دعم!
// بعض الكود ...
} آخر {
التنبيه ("المستعرض الخاص بك لا يدعم HTML5 LocalStorage. جرب ترقية.") ؛
}
أو
إذا (!! localstorage) {
// نعم! LocalStorage و SessionStorage دعم!
// بعض الكود ...
} آخر {
التنبيه ("المستعرض الخاص بك لا يدعم HTML5 LocalStorage. جرب ترقية.") ؛
}
من الواضح أن الطريقة الأولى هي الأكثر مباشرة وأبسط.
استخدام تخزين الويبيخزن تخزين الويب أزواج القيمة الرئيسية ، ويخزنها المتصفح كسلسلة. تذكر تحويلها إلى تنسيقات أخرى عند الضرورة.
باستثناء الاستخدامات المختلفة لـ SessionStorage و LocalStorage ، فإن قائمة الأعضاء هي نفسها:
المفتاح = القيمة: تخزين أزواج قيمة المفتاح
SetItem (المفتاح ، القيمة): حفظ أزواج القيمة الرئيسية
GetItem (المفتاح): احصل على زوج القيمة المفتاح
removeItem (المفتاح): قم بإزالة جميع أزواج القيمة الرئيسية
Clear (): مسح جميع أزواج القيمة الرئيسية
الطول: عدد أزواج القيمة الرئيسية
هنا ما زلنا بحاجة إلى التأكيد: يمكن أن تكون نوع القيمة في طريقة SetItem (المفتاح ، القيمة) من الناحية النظرية من أي نوع ، ولكن في الواقع سيقوم المتصفح بتسمية طريقة tostring القيمة للحصول على قيمة السلسلة الخاصة به وتخزينها محليًا. لذلك ، إذا كان نوعًا مخصصًا ، فأنت بحاجة إلى تحديد طريقة tostring ذات معنى بنفسك. على سبيل المثال ، يتم استخدام المثال التالي بالتزامن مع json.stringify:
var person = {'name': 'Rainman' ، 'Age': 24} ؛
localstorage.setitem ("Me" ، Json.Stringify (person)) ؛
json.parse (localstorage.getItem ('me')). الاسم ؛ // 'Rainman'
/**
* json.stringify ، تحويل بيانات JSON إلى سلاسل
* json.stringify ({'name': 'fred' ، 'Age': 24}) ؛ // '{"name": "Fred" ، "Age": 24}'
* json.stringify (['a' ، 'b' ، 'c']) ؛ // '["A" ، "B" ، "C"] "
* json.parse ، json.stringify json.stringify
* json.parse ('["A" ، "B" ، "C"]) // ["A" ، "B" ، "C"]
*/
بالإضافة إلى ذلك ، عند إضافة أزواج القيمة الرئيسية ، إذا كان عدد الإضافات كبيرة ، فمن الأكثر أمانًا للتحقق مما إذا كان هناك أي استثناءات تتجاوز الحد:
يحاول {
localStorage.setItem (itemId ، values.join ('؛')) ؛
} catch (e) {
if (e == quesa_exceeded_err) {
تنبيه ("الحصص تجاوزت!") ؛
}
}
طريقة تخزين الويب بسيطة للغاية. المثال التالي هو حساب عدد النقرات على الزر:
<! doctype html>
<html>
<head>
<script>
وظيفة ClickCounter ()
{
إذا (typeof (التخزين)! == "غير محدد")
{
if (localstorage.clickcount)
{
localStorage.ClickCount = number (localStorage.ClickCount) +1 ؛
}
آخر
{
localStorage.ClickCount = 1 ؛
}
document.getElementById ("result"). innerhtml = "لقد قمت بالنقر فوق الزر" + localstorage.clickcount + "الوقت (s)." ؛
}
آخر
{
document.getElementById ("النتائج"). innerhtml = "آسف ، لا يدعم متصفحك تخزين الويب ..." ؛
}
}
</script>
</head>
<body>
<p> <button onClick = "ClickCounter ()" type = "button"> انقر فوق لي! </button> </p>
<div id = "result"> </viv>
<p> انقر فوق الزر لرؤية زيادة العداد. </p>
<p> أغلق علامة التبويب المتصفح (أو النافذة) ، وحاول مرة أخرى ، وسيستمر العداد في العد (لا يتم إعادة تعيينه). </p>
</body>
</html>
في المثال أعلاه ، يمكنك تغيير LocalStorage إلى SessionStorage ، انقر فوق الزر عدة مرات والتحقق من التأثير قبل وبعد إغلاق المتصفح.
المشاكل الحاليةتتركز عيوب تخزين الويب بشكل أساسي في أمانها ، والتي تنعكس في النقطتين التاليتين:
1. سيقوم المتصفح بتخصيص مساحة تخزين مستقلة لكل مجال ، أي أن البرنامج النصي لا يمكنه الوصول إلى مساحة التخزين في المجال B في المجال A ، لكن المتصفح لن يتحقق مما إذا كان المجال الذي يقع فيه البرنامج النصي هو نفسه المجال الحالي. أي أن البرامج النصية المضمنة في المجال A في المجال B لا تزال تصل إلى البيانات في المجال B.
2. البيانات المخزنة محليًا ليست مشفرة ولن تنتهي صلاحيتها أبدًا ، وهو أمر سهل للغاية للتسبب في تسرب الخصوصية.
بالإضافة إلى ذلك ، لمزيد من القضايا المتعلقة بالأمن ، يرجى الرجوع إلى الرابط في المرجع العملي لاحقًا.
قائمة المواصفات الأخرى (لفهمها فقط ، ربما تختفي في أي وقت)قاعدة بيانات الويب
في اقتراح HTML5 القديم ، إذا كنت بحاجة إلى تخزين البيانات المعقدة ، فيمكنك استخدام قاعدة بيانات الويب ، والتي يمكنها استخدام SQL مثل برنامج العميل (تم التخلي عن معيار قاعدة بيانات الويب ، لذلك هنا ذكر موجز) ؛ GlobalStorageهذا يقترح أيضا في HTML5. بعد إغلاق المتصفح ، لا يزال من الممكن الاحتفاظ بالمعلومات المخزنة باستخدام GlobalStorage. مثل LocalStorage ، يمكن مشاركة المعلومات المخزنة على أي صفحة في المجال بواسطة جميع الصفحات ، ولكن حاليًا تدعمها Firefox فقط.
بناء الجملة الأساسي:
• GlobalStorage ['developer.mozilla.org'] - يمكن قراءة جميع المجالات الفرعية تحت Developer.mozilla.org من خلال كائن تخزين مساحة الاسم هذا.
• GlobalStorage ['mozilla.org'] - يمكن قراءة جميع صفحات الويب تحت اسم مجال mozilla.org وكتابتها من خلال كائن تخزين مساحة الاسم هذا.
• GlobalStorage ['org'] - يمكن قراءة جميع صفحات الويب تحت اسم مجال .org وكتابتها من خلال كائن تخزين مساحة الاسم هذا.
• GlobalStorage [''] - يمكن قراءة أي صفحة ويب تحت أي اسم مجال ومكتبها من خلال كائن تخزين مساحة الاسم.
خصائص الطريقة:
• SetItem (المفتاح ، القيمة) - تعيين أو إعادة تعيين قيمة المفتاح.
• GetItem (مفتاح) - يحصل على قيمة المفتاح.
• removeItem (مفتاح) - يزيل قيمة المفتاح.
• تعيين قيمة المفتاح: window.globalStorage [planabc.net] .Key = value ؛
• احصل على قيمة المفتاح: value = window.globalStorage [planabc.net] .Key ؛
ميزات أخرى:
• وقت انتهاء الصلاحية هو نفسه المحلي ، وبعض الميزات الأخرى تشبه أيضًا LocalStorage.
• يدعم Firefox الآن فقط تخزين GlobalStorage ضمن المجال الحالي. سيؤدي استخدام مجال مشترك إلى حدوث رمز خطأ أمان خطأ مماثل: 1000.
فهرسةأخيرًا ، نريد تقديم indexedDB. بالمقارنة مع المواصفات الأخرى ، تقوم Firefox فقط بتنفيذ INSTEDDB حاليًا (بالمناسبة ، تقول Mozilla إنها لن تنفذ قاعدة بيانات الويب SQL أبدًا) ، لكن Google قالت إنها تدرس إضافة دعم IndexDB إلى Chrome.
يقدم INSTEDDB مفهوم متجر الكائنات ، والذي يشبه إلى حد ما قاعدة بيانات SQL حيث يمكنك تخزين السجلات في قاعدة البيانات ، ويمكن لكل سجل أن يحتوي على العديد من الحقول ، يحتوي كل حقل على نوع بيانات محدد ، يمكنك اختيار مجموعة فرعية من السجلات وعبورها مع المؤشر ، في حين أن جميع التغييرات في متجر الكائن تستند إلى المعاملات.
لمزيد من المعلومات ، يرجى الرجوع إلى الوثائق حول indexedDB في Firefox في مرجع الاستخدام لاحقًا.
المرجع العملي:المستند الرسمي: http://www.w3schools.com/html5/
مخاوف قالب: http://www.cuoxin.com/w3school/html5/
أمان التخزين المحلي: http://www.mhtml5.com/2012/03/4586.html
الميزات التجريبية لـ Firefox: https://developer.mozilla.org/en-us/docs/indexeddb