تعريف LocalStorage و شرح طريقة إستخدامه

LocalStorage هو طريقة لتخزين المعلومات في المتصفح. هاد المعلومات مكايتمسحوش واخا إتسد الموقع أو المتصفح و أيضا كل موقع عندو حق يوصل غير للمعلومات اللي قام بتخزينها, مثلا موقع darija.dev قام بتخزين شي معلومات في LocalStorage , حتا موقع أخر مايقدر يوصل لديك المعلومات لأن هاد المعلومات كايتخزنو تحت إسم نطاق الموقع اللي قام بتخزينهم.

موقع darija.dev كايستعمل LocalStorage باش يخزن نوع theme اللي ختارو المستعمل. إلى دخلتي لموقع darija.dev و حولتي theme ل dark ثم فتحتي ل Console و كتبتي localStorage , غاتكون النتيجة على هاد الشكل.

طريقة إستعمال LocalStorage :

المتصفح كايتوفر على API اللي كايمكنك من أنك تخزن المعلومات في LocalStorage و كذلك تقراهم.

1️⃣ تخزين المعلومات :

قبل ما نشوفو كفاش تخزن المعلومات, خاصك تعرف نقطة مهمة , LocalStorage كايقبل غير المعلومات اللي من نوع String بمعنى أنه إلى بغيتي تخزن شي Object ولا Array خاصك بعدا تحولو ل String.

المعلومات كايتم التخزين ديالهم على شكل إسم و قيمة key/value pairs.

• مثلا بغينا نخزنو نوع theme اللي ختارو المستخدم, نفتارضو أنه ختار Dark theme. بإمكانك تكتبها بهاد الطريقة :

localStorage.setItem('theme', 'dark');

//////////////       أو  بطريقة أخرى        ////////////////////

localStorage.theme = 'dark'

• إلى بغيتي تخزن Object أو Array , خاصك أولا تحولو ل String ,بإستعمال JSON.stringify .

const data = {
name:'darija.dev',
theme:'dark'
}

localStorage.setItem('data', JSON.stringify(data));

//////////////       أو  بطريقة أخرى        ////////////////////

localStorage.data = JSON.stringify(data);

2️⃣ قراءة المعلومات :

طريقة قراءة المعلومات من LocalStorage سهلة و بسيطة.

const theme = localStorage.getItem('theme');
console.log(theme); // dark

//////////////       أو  بطريقة أخرى        ////////////////////

const theme = localStorage.theme;
console.log(theme); // dark

بالنسبة للمعلومات اللي من نوع Object أو Array خاصنا نحولوهم من String للنوع الأصلي اللي كانو عليه, من أجل هادشي كانستخدمو JSON.parse :

const data = JSON.parse(localStorage.getItem('data'));
console.log(data); // {name: 'darija.dev', theme: 'dark'}

//////////////       أو  بطريقة أخرى        ////////////////////

const data = JSON.parse(localStorage.data);
console.log(data); // {name: 'darija.dev', theme: 'dark'}

3️⃣ مسح معلومة محددة :

مسح شي معلومة من LocalStorage كايدار بهاد الطريقة :

localStorage.removeItem('theme');

//////////////       أو  بطريقة أخرى        ////////////////////

delete localStorage.theme;

4️⃣ مسح جميع المعلومات :

إلى بغيتي تمسح جميع المعلومات اللي كاينين في LocalStorage بخطوة واحدة, غاديرها بهاد الطريقة :

localStorage.clear();

خلاصة :

LocalStorage طريقة رائعة لتخزين المعلومات بصفة دائمة, لكن هاد المعلومات إقدر المستخدم يمسحهم في أي وقت , لذلك مخاصكش تخزن المعلومات اللي بلا بها الموقع ديالك يقدر يتوقف على العمل. و كذلك ما تخزنش معلومات اللي سرية, لأن LocalStorage مكايقومش بتشفير المعلومات اللي كاتخزن فيه.