تعليق: يقدم هذا المقال بشكل أساسي الاستخدام الأساسي لـ LocalStorage و SessionStorage وعمليات اجتياز ومعالجة الاستثناءات ، إلخ. للتخزين المحلي HTML5. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
إن LocalStorage في واجهة برمجة تطبيقات التخزين المحلية في HTML5 هي نفسها مثل SessionStorage ، والفرق هو أن SessionStorage تم مسحها بعد إغلاق الصفحة ، بينما سيتم حفظ LocalStorage طوال الوقت. دعنا نأخذ LocalStorage كمثال هنا لتقديم التخزين المحلي لـ HTML5 بإيجاز ونقدم بعض الأمثلة للمشاكل الشائعة مثل اجتياز. LocalStorage هي واجهة برمجة تطبيقات HTML5 محليًا. يستخدم أزواج القيمة الرئيسية للوصول إلى البيانات ، ويمكن أن تكون البيانات التي تم الوصول إليها فقط سلسلة. المستعرضات المختلفة لديها دعم مختلف ل API ، مثل طريقة الاستخدام ، ومساحة التخزين القصوى ، إلخ.
1.
من السهل فهم واجهة برمجة تطبيقات LocalStorage. فيما يلي عمليات و API الشائعة والأمثلة: تعيين البيانات: LocalStorage.SetItem (المفتاح ، القيمة) ؛ مثال:
لـ (var i = 0 ؛ i <10 ؛ i ++) {
localstorage.setitem (i ، i) ؛
}
الحصول على البيانات: localstorage.getItem (مفتاح) احصل على جميع البيانات: localstorage.valueof () مثال:
localstorage.getItem (i) ؛
}
حذف البيانات: LocalStorage.RemoveItem (مفتاح) مثال:
localStorage.RemoveItem (i) ؛
}
امسح جميع البيانات: localstorage.clear () احصل على عدد البيانات المحلية المخزنة: LocalStorage.Length احصل على القيمة الرئيسية للبيانات nth: localstorage.key (n)
2. تكرار طريقة قيمة مفتاح المفتاح
لـ (var i = localstorage.length-1 ؛ i> = 0 ؛ i-) {
console.log ('' + (i + 1) + 'القيمة الرئيسية للبيانات هي:' + localstorage.key (i) + '، والبيانات هي:' + localstorage.getitem (localstorage.key (i))) ؛
}
3. اختبار حد حجم التخزين ومعالجة الاستثناءات
3.1 اختبار الحد من تخزين البيانات
المتصفحات المختلفة أساسا قيود على حجم التخزين المحلي من HTML5. نتائج الاختبار هي كما يلي:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5M (إذا تجاوزها ، فإن مربع حوار يسمح بطلبات مزيد من المساحة ستظهر)
مرجع رمز الاختبار:
<! doctype html>
<html>
<head>
<script>
سجل الوظائف (msg) {
console.log (msg) ؛
تنبيه (MSG) ؛
} </p> <p> var limit ؛
var half = '1' ؛ // سيتم تغيير هذا إلى الصينيين وركض مرة أخرى
var str = نصف ؛
فار ستتر
بينما (1) {
يحاول {
localstorage.clear () ؛
str += نصف ؛
localstorage.setitem ('cache' ، str) ؛
النصف = str ؛
} catch (ex) {
استراحة؛
}
}
var base = str.length ؛
var off = base / 2 ؛
var isleft = 1 ؛
بينما (قبالة) {
إذا (isleft) {
نهاية = قاعدة - (OFF / 2) ؛
} آخر {
نهاية = قاعدة + (OFF / 2) ؛
} </p> <p> sstr = str.slice (0 ، end) ؛
localstorage.clear () ؛
يحاول {
localstorage.setitem ('cache' ، str) ؛
limit = strtrtr.length ؛
Isleft = 0 ؛
} catch (e) {
Isleft = 1 ؛
} </p> <p> base = end ؛
Off = Math.floor (Off / 2) ؛
} </p> <p> log ('limit:' + limit) ؛
</script>
</html>
3.2 معالجة استثناء تخزين البيانات
يحاول{
localstorage.setitem (المفتاح ، القيمة) ؛
} catch (oexception) {
if (oexception.name == 'quesaexceederror') {
console.log ('الحد المحلي في التخزين تجاوزت!') ؛
// إذا كانت المعلومات التاريخية غير مهمة ، فيمكنك مسحها ثم تعيينها
localstorage.clear () ؛
localstorage.setitem (المفتاح ، القيمة) ؛
}
}