প্রতিক্রিয়ায় স্থানীয় স্টোরেজে সংরক্ষণ করা হচ্ছে

ভূমিকা

লাইটওয়েট অ্যাপ্লিকেশন বিকাশ করার সময় - আমরা কিছু ডেটা সংরক্ষণ করতে চাই। যদি একটি ডাটাবেস ওভারকিল হয় - একটি দুর্দান্ত বিকল্প আছে: 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 কীগুলিতে মান নির্ধারণ করে, যার ফলে একটি কী-মান জোড়া. যখনই আমরা এটি থেকে পুনরুদ্ধার করতে চাই তখনই এই কীটি সংশ্লিষ্ট মান পুনরুদ্ধার করতে ব্যবহার করা হবে localStorage.

বিঃদ্রঃ: তথ্য সংরক্ষণ করার জন্য localStorage, আমরা প্রথমে এটি রূপান্তর করতে হবে JSON স্ট্রিং ব্যবহার করে JSON.stringify() ফাংশন এবং যখন আমরা এটি পুনরুদ্ধার করতে চাই, আমরা ব্যবহার করে ডেটা পার্স করব JSON.parse(), JSON স্ট্রিংকে আবার a এ রূপান্তর করা হচ্ছে JSON অবজেক্ট.

প্রতিক্রিয়াতে ডেটা নিয়ে কাজ করার সময়, আমরা প্রায়শই ব্যবহার করি আঙ্গুলসমূহ আমাদের এটি সংরক্ষণ/ধরে রাখতে সাহায্য করতে। সেই ডেটা কোথায় আপলোড করতে হবে তা খুঁজে পেতে হুকগুলি আমাদের সাহায্য করতে পারে৷ এটিও প্রযোজ্য localStorage কারণ আমরা ব্যবহার করব useState() এবং useEffect() হুক এই hooks কারণ সমালোচনামূলক useState() হুক ডেটা ধরে রাখতে এবং সেট করতে ব্যবহৃত হয়, যেখানে useEffect() হুক প্রথম রেন্ডারের পরে ডিফল্টরূপে ট্রিগার করা হয় এবং যখনই স্টেটটি দ্বিতীয় প্যারামিটারের পরিবর্তন হিসাবে পাস হয়।

ফাউন্ডেশন ব্যাখ্যা করার পরে, এখানে কোডটি আমরা ডেটা সংরক্ষণ করতে ব্যবহার করব localStorage:

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

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

আমরা আমাদের মধ্যে যে ডেটা সংরক্ষণ করতে চাই তা ধরে রাখার জন্য আমরা প্রথমে একটি রাজ্য তৈরি করেছি localStorage, এবং তারপর আমরা একটি তৈরি করেছি useEffect() hook, দ্বিতীয় পরামিতি হিসাবে রাষ্ট্র পাস. এইভাবে, যখনই রাষ্ট্র পরিবর্তন হয়, তথ্য localStorage বর্তমান মান আপডেট করা হয়.

আমরা মূল কার্যকারিতা পরিচালনা করেছি, যা ডেটা স্টোরেজের মধ্যে আমাদের সহায়তা করতে ব্যবহৃত হয় useEffect() হুক:

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

উপসংহার

এই নিবন্ধে, আমরা শিখেছি কীভাবে প্রতিক্রিয়া ব্যবহার করে ডেটা সংরক্ষণ করতে প্রতিক্রিয়া হুক ব্যবহার করতে হয় localStorage. যেমন পূর্বে বলা হয়েছে, এটি কখনই একটি ডাটাবেসের ভূমিকা প্রতিস্থাপন করবে না, বরং কিছু ব্যবহারকারী-সম্পর্কিত ডেটা সংরক্ষণ করতে আমাদের সহায়তা করবে যা UI উন্নত করতে পারে কিন্তু ব্রাউজার থেকে স্বাধীনভাবে টিকে থাকার জন্য নয়।