انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 110
دورة جافا سكريبت

Web Storage API

في هذا الدرس سوف نتعرف علي ال Local Storage والذي من خلاله يمكننا تخزين بعض البيانات واستدعائها عند الحاجة وذلك باستخدام ال بعض الاوامر البرمجية وفي هذا الدرس سوف نتعرف عليها وعلي طريقة كتابتها واستخدامها

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,534
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Web Storage API

ال localStorage هي عبارة عن object تسمح لك باسترجاع البيانات المخزنة من خلال المتصفح عن طريق استخدام ال object التالي "Window" او يمكنك استخدام "localStorage" بدونها ,

- يتم تخزين هذه البيانات خلال جلسة المتصفح browser session ,

- يمكننا الوصول الي البيانات المخزنة علي المتصفح Window من خلال اي صفحة ويب نقوم بفتحها علي نفس المتصفح 

في هذا الدرس سوف نتعرف علي طريقة تخزين بيانات معينة بداخل المتصفح ثم بعد ذلك يمكننا استرجاعها بكل سهولة وهي تشبه الي حد كبير ال cookies ولكنها افضل واسرع منها ويمكننا تخزين هذه البيانات بأحدي الكائنين objects التاليين 

  • localStorage 
  • sessionStorage 

Local Storage

يخزن الكائن localStorage البيانات بدون أي تاريخ او وقت لانتهاء مدة التخزين . كما أنه لن يتم حذف هذه البيانات عند اغلاق المتصفح وستكون متوفرة في اليوم التالي أو الأسبوع أو الشهر أو السنة التالية أيضاً .

HTML 
localStorage.setItem("name","Ali Adel");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
جرّب بنفسك

sessionStorage Object

يعتبر الكائن  sessionStorage شبيه للكائن localStorage باستثناء أنه يخزن البيانات لجلسة واحدة فقط . أي أنه سيتم حذف هذه البيانات عند اغلاق المتصفح .

Example

HTML 
sessionStorage.setItem("name","Ali adel");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
جرّب بنفسك

setItem()

نستطيع تخزين البيانات في ال local storage عن طريق تمريرها بداخل دالة ( )setItem  

- يتم تمرير البيانات بداخلها علي شكل "key " و "value" 

- يمكننا تخزين object في ال local storage يحتوي علي العديد من البيانات ويتم تحديد اسم هذا ال object وبعد ذلك وضع البيانات التي تريدها علي شكل "key" و value 

Example

HTML 
LocalStorage.setItem("close", {
"key":"value"
})

removeItem()

يمكننا حذف عنصر معين قمنا بتخزينه بداخل ال local storage عن طريق تمريره الي الدالة ( )removeItem

Syntax

HTML 
LocalStorage.removeItem("key");

Clear localStorage

يمكننا حذف جميع البيانات التي قمنا بتخزينها مسبقا عن طريق استخدام دالة ( )clear 

Syntax

HTML 
localStorage.clear();

Getting length

يمكننا معرفة حجم التخزين الخاص بنا في ال local storage عن طريق استخدام الخاصية length

Syntax

HTML 
LocalStorage.length;

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…