Web Storage API
في هذا الدرس سوف نتعرف علي ال Local Storage والذي من خلاله يمكننا تخزين بعض البيانات واستدعائها عند الحاجة وذلك باستخدام ال بعض الاوامر البرمجية وفي هذا الدرس سوف نتعرف عليها وعلي طريقة كتابتها واستخدامها
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Web Storage API chevron_left JavaScript
Local Storage
</> Web Storage API add_circle_outline
ال localStorage هي عبارة عن object تسمح لك باسترجاع البيانات المخزنة من خلال المتصفح عن طريق استخدام ال object التالي "Window" او يمكنك استخدام "localStorage" بدونها ,
- يتم تخزين هذه البيانات خلال جلسة المتصفح browser session ,
- يمكننا الوصول الي البيانات المخزنة علي المتصفح Window من خلال اي صفحة ويب نقوم بفتحها علي نفس المتصفح
في هذا الدرس سوف نتعرف علي طريقة تخزين بيانات معينة بداخل المتصفح ثم بعد ذلك يمكننا استرجاعها بكل سهولة وهي تشبه الي حد كبير ال cookies ولكنها افضل واسرع منها ويمكننا تخزين هذه البيانات بأحدي الكائنين objects التاليين
- localStorage
- sessionStorage
</> Local Storage add_circle_outline
يخزن الكائن localStorage البيانات بدون أي تاريخ او وقت لانتهاء مدة التخزين . كما أنه لن يتم حذف هذه البيانات عند اغلاق المتصفح وستكون متوفرة في اليوم التالي أو الأسبوع أو الشهر أو السنة التالية أيضاً .
localStorage.setItem("name","Ali Adel");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</> sessionStorage Object add_circle_outline
يعتبر الكائن sessionStorage شبيه للكائن localStorage باستثناء أنه يخزن البيانات لجلسة واحدة فقط . أي أنه سيتم حذف هذه البيانات عند اغلاق المتصفح .
Example
sessionStorage.setItem("name","Ali adel");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</> setItem() add_circle_outline
نستطيع تخزين البيانات في ال local storage عن طريق تمريرها بداخل دالة ( )setItem
- يتم تمرير البيانات بداخلها علي شكل "key " و "value"
- يمكننا تخزين object في ال local storage يحتوي علي العديد من البيانات ويتم تحديد اسم هذا ال object وبعد ذلك وضع البيانات التي تريدها علي شكل "key" و value
</> removeItem() add_circle_outline
يمكننا حذف عنصر معين قمنا بتخزينه بداخل ال local storage عن طريق تمريره الي الدالة ( )removeItem
</> Clear localStorage add_circle_outline
يمكننا حذف جميع البيانات التي قمنا بتخزينها مسبقا عن طريق استخدام دالة ( )clear
</> Getting length add_circle_outline
يمكننا معرفة حجم التخزين الخاص بنا في ال local storage عن طريق استخدام الخاصية length
لديك استفسار ؟
يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
