Html5 localStorage البرنامج التعليمي للبدء

يسمح لك التخزين المحلي للقراءة فقط بالوصول إلى تخزين كائن المستند عن بعد (الأصل)؛ ويتم تخزين بياناته كجلسة عبر المستعرضات. يشبه localStorage sessionStorage، والفرق هو أن البيانات المخزنة في localStorage غير محددة، في حين سيتم مسح البيانات المخزنة في sessionStorage عند انتهاء جلسة الصفحة - أي عند إغلاق الصفحة.

عدد أزواج القيمة الرئيسية في localStorage.

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

إضافة/تحديث أزواج قيمة مفتاح localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // التخزين {العمر: 23، الاسم: mazey، الطول: 2}

يعادل:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // التخزين {العمر: 23، الاسم: mazey، الطول: 2}

يحصل على قيمة المفتاح المحدد في localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // باطل

يعادل:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // غير محدد

يزيل زوج المفتاح والقيمة للمفتاح المحدد من localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // التخزين {age: 23, name: mazey, length: 2}localStorage.removeItem('age') / / undeflocalStorage // {name: mazey, length: 1}localStorage.removeItem('age') // غير محدد

امسح جميع أزواج القيمة الرئيسية في localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // التخزين {العمر: 23، الاسم: mazey، الطول: 2}localStorage.clear()localStorage // التخزين {الطول: 0}

يمكن لـ localStorage تخزين السلاسل فقط، لذا يجب تحويل القيم المعقدة مثل المصفوفات/الكائنات إلى سلاسل باستخدام JSON.stringify() أولاً، ثم استخدام JSON.parse() لتحويلها إلى قيم معقدة قبل الاستخدام.

 Let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​​​// [1, 2, 3]

اسمح للنافذة بمراقبة تخزين localStorage. عندما يتغير التخزين المحلي لملصق ما، تستجيب التسميات الأخرى وفقًا لذلك.

test0.html - تغيير التخزين المحلي.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). القيمة </script>

test1.html - يستجيب لتغيرات التخزين المحلي.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // الاسم 123 })</script>

1. لا يمكن استخدام localStorage إلا تحت نفس اسم المجال، ويمكن استخدامه مع postMessage وiframe لتحقيق الاتصال عبر النطاقات.
2. الإصدارات الأقل من IE لا تدعم التخزين المحلي.
3. يجب استخدامه في بيئة خادم، أي أنه لا يمكن استخدامه في بيئات غير طبيعية مثل file://.
4. قد تحدث مشكلات غير متوقعة في وحدة التخزين المحلية على الأجهزة المحمولة (H5، IOS، Android).

الرجاء التوقف عن استخدام التخزين المحلي

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.