53 lines
2.7 KiB
Markdown
53 lines
2.7 KiB
Markdown
|
---
|
|||
|
|
title: Window.localStorage
|
|||
|
|
localeTitle: Window.localStorage
|
|||
|
|
---
|
|||
|
|
## window.localStorage
|
|||
|
|
|
|||
|
|
يوفر `localStorage` طريقة لتطبيقات الويب الخاصة بك لتخزين البيانات محليًا داخل متصفح المستخدم.
|
|||
|
|
|
|||
|
|
قبل HTML5 ، يجب تخزين بيانات التطبيق في ملفات تعريف الارتباط. يتم تضمين ملفات تعريف الارتباط مع كل طلب HTTP ، مما يؤدي إلى إبطاء تطبيق الويب الخاص بك عن طريق نقل نفس البيانات. تقتصر ملفات تعريف الارتباط أيضًا على حوالي 4 كيلوبايت من البيانات والتي قد لا تكون كافية لتخزين البيانات المطلوبة.
|
|||
|
|
|
|||
|
|
حد `localStorage` هو أكبر من ملفات تعريف الارتباط مع ما يصل إلى 10 ميغابايت من البيانات لكل مجال ولا يتم نقل المعلومات إلى الخادم مطلقًا.
|
|||
|
|
|
|||
|
|
### أنواع التخزين المحلي
|
|||
|
|
|
|||
|
|
هناك نوعان رئيسيان من أنواع تخزين الويب:
|
|||
|
|
|
|||
|
|
* التخزين المحلي: يقوم هذا بتخزين البيانات بدون تاريخ انتهاء صلاحية. ستستمر البيانات في `localStorage` حتى عند إغلاق متصفح المستخدم وإعادة فتحه.
|
|||
|
|
* تخزين الجلسة: يشبه التخزين `localStorage` ، باستثناء أنه يخزن البيانات لجلسة واحدة فقط. بمجرد إغلاق المتصفح للمستخدم ، سيتم فقد هذه الجلسة وسيتم حذف البيانات الدائمة من المتصفح.
|
|||
|
|
|
|||
|
|
### HTML5 طرق التخزين المحلية
|
|||
|
|
|
|||
|
|
`localStorage` تأتي مع بعض طرق JavaScript المختلفة التي تجعل من السهل العمل معها ، دعنا ننظر إلى بعض:
|
|||
|
|
|
|||
|
|
_ملاحظة: تنطبق هذه الطرق على كل من أنواع تخزين الويب (التخزين المحلي وتخزين الجلسة)_
|
|||
|
|
|
|||
|
|
لتعيين البيانات ، نحتاج إلى إجراء ما يلي:
|
|||
|
|
|
|||
|
|
`localStorage.setItem('Name', 'somevalue');
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
لاسترداد بعض البيانات من التخزين:
|
|||
|
|
|
|||
|
|
`localStorage.getItem('Name');
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
لإزالة أو حذف بعض البيانات ، يمكننا القيام بذلك:
|
|||
|
|
|
|||
|
|
`localStorage.removeItem('Name');
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
لمسح السعة التخزينية بالكامل (وليس فقط عنصرًا فرديًا) ، يمكننا استخدام:
|
|||
|
|
|
|||
|
|
`localStorage.clear();
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
للحصول على عدد الخصائص في السعة التخزينية:
|
|||
|
|
|
|||
|
|
`localStorage.length;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
#### معلومات اكثر:
|
|||
|
|
|
|||
|
|
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
|