ری ایکٹ میں لوکل اسٹوریج میں اسٹور کرنا

تعارف

ہلکی پھلکی ایپلیکیشنز تیار کرتے وقت - ہم کچھ ڈیٹا کو ذخیرہ کرنا چاہتے ہیں۔ اگر ڈیٹا بیس حد سے زیادہ ہے تو - ایک بہترین متبادل ہے: localStorage!

اگرچہ یہ ڈیٹا بیس کے مقاصد کے لیے ڈیٹا بیس کو تبدیل نہیں کرتا ہے، لیکن یہ ایک سادہ فائل پر مبنی اسٹوریج سسٹم کے طور پر کام کرتا ہے جس سے آپ آسانی سے قابل رسائی ڈیٹا پوائنٹس کو ذخیرہ کرنے کے لیے فائدہ اٹھا سکتے ہیں۔

اس مضمون میں ، ہم استعمال کریں گے کہ کس طرح استعمال کریں گے localStorage آسانی سے اپنے براؤزر میں ڈیٹا ذخیرہ کرنے کے لیے۔ یہ ڈیٹا بطور محفوظ کیا جاتا ہے۔ اہم قدر کے جوڑے جسے صارف آسانی سے حاصل کر سکتا ہے۔

ڈیٹا کو محفوظ کر رہا ہے۔ localStorage رد عمل میں بہت آسان ہے:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

اگر آپ جلدی میں نہیں ہیں اور اس کے کام کرنے کے طریقہ کے بارے میں مزید جاننا چاہتے ہیں تو پڑھتے رہیں!

کیا ہے مقامی ذخیرہ?

localStorage ایک ویب اسٹوریج آبجیکٹ ہے جو ڈویلپرز کو ذخیرہ کرنے کے قابل بناتا ہے۔ اہم قدر کے جوڑے ایک ویب براؤزر میں اور اس بات کو یقینی بناتا ہے کہ یہ ڈیٹا تمام صفحہ کی تازہ کاری میں زندہ رہتا ہے، یہاں تک کہ جب صارف براؤزر کو بند یا دوبارہ شروع کرتا ہے - اور اس کی کوئی میعاد ختم ہونے کی تاریخ نہیں ہے۔ ذخیرہ شدہ کلیدی قدر کے جوڑوں میں کسی بھی قسم کا ڈیٹا شامل ہو سکتا ہے - ارے، آبجیکٹ، تار، نمبر، اور بہت سے دوسرے۔

تاہم، یہ آپ کی ویب سائٹس اور ویب ایپس میں ڈیٹا بیس کے کردار کی جگہ نہیں لے سکتا کیونکہ جب صارف براؤزر کے کیشے اور مقامی اسٹوریج کو صاف کرتا ہے تو ڈیٹا ضائع ہو جاتا ہے - بالآخر، یہ مقامی ذخیرہ اور اس طرح استعمال کیا جانا چاہئے. بہر حال، ایسے حالات ہیں جن میں صارف استعمال کر سکتا ہے۔ localStorage، جیسے لاگو کرنا سیاہ موڈ خصوصیت، صارف کی فارم ان پٹ ویلیو کو برقرار رکھنا، اور بہت سے دوسرے۔

localStorage بلٹ ان طریقے ہیں جو ہمیں براؤزر کے اسٹوریج آبجیکٹ تک رسائی کی اجازت دیتے ہیں۔ ایک مثال یہ ہے۔ setItem() طریقہ، جو ہمیں ایک کلید اور قدر شامل کرنے کی اجازت دیتا ہے۔ localStorageلہذا ہمیں ڈیٹا ذخیرہ کرنے کے قابل بناتا ہے۔ ڈیٹا کو بازیافت کرنے کے لیے دیگر طریقے استعمال کیے جاتے ہیں۔ getItem()ڈیٹا حذف کریں - removeItem()، تمام کو صاف کریں localStorage مثالیں - clear()، اور اسی طرح.

ڈیٹا کو ذخیرہ کرنا مقامی ذخیرہ کے ساتہ سیٹ آئٹم() طریقہ

۔ setItem() طریقہ ہمیں کسی بھی ڈیٹا کی قسم کی قدروں کو محفوظ کرنے کی اجازت دیتا ہے۔ localStorage کلیدوں کو قدریں تفویض کرکے، جس کے نتیجے میں a کلیدی قدر کا جوڑا. جب بھی ہم اسے دوبارہ حاصل کرنا چاہیں گے تو اس کلید کو متعلقہ قدر کی بازیافت کے لیے استعمال کیا جائے گا۔ localStorage.

نوٹ: میں ڈیٹا ذخیرہ کرنے کے لیے localStorage، ہمیں پہلے اسے تبدیل کرنا ہوگا۔ JSON سٹرنگ کا استعمال کرتے ہوئے JSON.stringify() فنکشن اور جب ہم اسے بازیافت کرنا چاہتے ہیں، تو ہم استعمال کرتے ہوئے ڈیٹا کو پارس کریں گے۔ JSON.parse()، JSON سٹرنگ کو واپس a میں تبدیل کرنا JSON آبجیکٹ.

React میں ڈیٹا کے ساتھ کام کرتے وقت، ہم اکثر استعمال کرتے ہیں۔ ہکس اسے ذخیرہ کرنے/ رکھنے میں ہماری مدد کرنے کے لیے۔ ہکس ہمیں یہ تلاش کرنے میں بھی مدد کر سکتے ہیں کہ وہ ڈیٹا کہاں اپ لوڈ کرنا ہے۔ اس پر بھی لاگو ہوتا ہے۔ localStorage کیونکہ ہم استعمال کریں گے۔ useState() اور useEffect() ہکس یہ ہکس اہم ہیں کیونکہ useState() ہک ڈیٹا کو رکھنے اور سیٹ کرنے کے لیے استعمال کیا جاتا ہے، جبکہ useEffect() پہلے رینڈر کے بعد اور جب بھی ریاست دوسرے پیرامیٹر میں تبدیلی کے طور پر گزرتی ہے تو ہک بطور ڈیفالٹ متحرک ہوتا ہے۔

فاؤنڈیشن کی وضاحت کے بعد، یہ وہ کوڈ ہے جسے ہم ڈیٹا کو ذخیرہ کرنے کے لیے استعمال کریں گے۔ localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

ہم نے پہلے اس ڈیٹا کو رکھنے کے لیے ایک ریاست بنائی ہے جسے ہم اپنے میں اسٹور کرنا چاہتے ہیں۔ localStorage، اور پھر ہم نے ایک تخلیق کیا ہے۔ useEffect() ہک، ریاست کو دوسرے پیرامیٹر کے طور پر گزر رہا ہے۔ اس طرح، جب بھی ریاست تبدیل ہوتی ہے، ڈیٹا میں localStorage موجودہ قدر میں اپ ڈیٹ کیا جاتا ہے۔

ہم نے بنیادی فعالیت کو ہینڈل کیا، جو ڈیٹا اسٹوریج میں ہماری مدد کے لیے استعمال ہوتی ہے۔ useEffect() کانٹا:

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

نتیجہ

اس آرٹیکل میں، ہم نے سیکھا کہ React استعمال کرتے ہوئے ڈیٹا کو ذخیرہ کرنے کے لیے React ہکس کا استعمال کیسے کریں۔ localStorage. جیسا کہ پہلے کہا گیا ہے، یہ کبھی بھی ڈیٹا بیس کے کردار کی جگہ نہیں لے گا، بلکہ صارف سے متعلق کچھ ڈیٹا کو ذخیرہ کرنے میں ہماری مدد کرے گا جو UI کو بہتر بنا سکتا ہے لیکن اس کا مقصد براؤزر سے آزادانہ طور پر برقرار رہنا نہیں ہے۔