LocalStorage

LocalStorage কি?

ধরেন, আপনি আপনার একটা জিনিস আপনার ঘরের মধ্যে একটা স্থানে রাখলেন এবং যখন আপনার প্রয়োজন হয় তখন সেই স্থান থেকে আপনার ওই জিনিসটা নিয়ে আপনার প্রয়োজন মেটান, ঠিক তেমনভাবেই লোকাল স্টোরেজ হচ্ছে আমাদের প্রত্যেকের ব্রাউজারের একটা স্টোরেজ। এই স্টোরেজ টা পার্সোনাল একটা স্টোরেজ। কারণ লোকাল স্টোরেজয়ে আপনি যদি কোন ডাটা সংগ্রহ করে রাখেন তাহলে অন্য কেউ এই ডাটা এক্সেস করতে পারবেনা শুধুমাত্র আপনি ছাড়া। এই ডাটা আপনার নিজস্ব ব্রাউজারে সেভ হয়ে থাকবে আর এটাই হচ্ছে লোকাল স্টোরেজ।

LocalStorage কেন ব্যবহার করা হয়?

আপনারা দেখে থাকবেন বিভিন্ন ই-কমার্স ওয়েবসাইটে কার্ট বলে একটা জিনিস থাকে এবং সেখানে আপনি আপনার প্রোডাক্ট এক এক করে কার্টে যুক্ত করতে পারেন এবং পরবর্তীতে সব প্রোডাক্ট একসাথে চেক আউট দিয়ে আপনি সেগুলা কিনতে পারেন। এখানে আপনার ওই কার্ডের যে প্রোডাক্ট রয়েছে সেগুলো সেভ করে রাখার জন্য লোকাল স্টোরেজ ব্যবহার করা হয় এবং আপনি যখন ওইখানে উইস লিস্টেও কোন কিছু এড করবেন তখনও লোকাল স্টোরেজের মাধ্যমে ঐগুলা সেভ করে রাখা হয়।

সংক্ষেপে, যখন ইউজারের এমন কোন ডাটা সংরক্ষণ করে রাখার প্রয়োজন হয় যে পরবর্তীতে যখন ইউজার আবার ওই ওয়েবসাইটে যাবে সেই ডাটা গুলো যেন ওই স্থানেই সেভ হয়ে থাকে সেক্ষেত্রে লোকাল স্টোরেজ ব্যবহার করা হয়।

LocalStorage কিভাবে ব্যবহার করা হয়?

লোকাল স্টোরেজ ব্যবহার করার জন্য বেশি কিছু জানার প্রয়োজন নাই। লোকাল স্টোরেজ হেন্ডেল করার জন্য তিনটি মেথড রয়েছে যেগুলো ব্যবহার করে ডেভলপাররা লোকাল স্টোরেজ হ্যান্ডেল করতে পারেন। নিচে সেগুলো দেওয়া হলঃ

1. localStorage.setItem()

2. localStorage.getItem()

3. localStorage.remove()

useCase -

// set item
localStorage.setItem( "key_here", your_data_here );

// get item
localStorage.getItem( "key_here" );

// remove item
localStorage.remove( "key_here" );

localStorage.setItem()

আমরা যখন লোকাল স্টোরেজে কোন কিছু সংরক্ষণ করে রাখতে চাই তখন এই মেথডটি কল করে আমরা আমাদের তথ্যগুলো লোকাল স্টোরেজে সেভ করে রাখতে পারি। লোকাল স্টোরেজে কোন কিছু সংরক্ষণ করে রাখার জন্য আমাদের এই মেথডের মধ্যে দুইটা জিনিস পাস করতে হয়ঃ

• Key

• Value

Key মানে হচ্ছে আপনি যে তথ্যটি সংরক্ষণ করে রাখতে চাচ্ছেন সেটার সংক্ষেপে একটি নাম যেটা দ্বারা আপনি পরবর্তীতে ওই তথ্যটি লোকাল স্টোরেজ থেকে বের করে আনতে পারবেন।

Value হচ্ছে আপনার ওই তথ্যটি যেটা আপনি লোকাল স্টোরেজে সংরক্ষণ করে রাখতে চাচ্ছেন।

এবং লোকাল স্টোরেজে কোন ডাটা সেট করতে হলে আমাদের ওই ডাটাকে স্ট্রিং এ কনভার্ট করতে হয় তারপর ওই ডাটা লোকাল স্টোরেজে সেট করতে হয়। কারণ লোকাল স্টোরেজ শুধুমাত্র স্ট্রিং ডাটা সংরক্ষণ করে রাখতে পারে আর সেজন্য একটা মেথড ও আছে আপনার যেকোনো ডাটা কে স্ট্রিং এ কনভার্ট করার জন্য সেটা হচ্ছে JSON.stringify()

useCase -

localStorage.setItem("key_here", JSON.stringify(your_data_here));

localStorage.getItem()

আপনি তো লোকাল স্টোরেজে ডাটা সংরক্ষণ করে ফেললেন কিন্তু যখন ওই ডাটা আপনার প্রয়োজন তখন ডাটাটা লোকাল স্টোরেজ থেকে তো আনতে হবে সেজন্য লোকাল স্টোরেজ এই localStorage.getItem() মেথডটি দিয়েছে যা সাহায্যে লোকাল স্টোরেজ থেকে যেকোনো ডাটা আনা সম্ভব।

আমরা যখন লোকাল স্টোরেজে কোন ডাটা সেট করি তখন আমাদের লোকাল localStorage.setItem() মধ্যে দুইটা জিনিস পাস করতে হয় key & value, কিন্তু আমরা যখন লোকাল স্টোরেজ থাকে কোন কিছু আনতে যাব তখন আমাদের শুধু key দিতে হয় এই মেথডের মধ্যে। এতে করে আমরা শুধু ওই স্পেসিফিক জিনিসটাই পাব যেটা আমাদের প্রয়োজন।

আমরা যখন লোকাল স্টোরেজে কোন ডাটা set করি তখন ওই ডাটা কে স্টিং করে সেট করা লাগে এবং যখন ওই ডাটাটা আমরা ব্যবহার করার জন্য get করি তখন ডাটা আগের ফরমেটে আনার জন্য আমাদের একটা মেথড কল করে ওই মেথডের মাধ্যমে ডাটাটা আনতে হয়, যাতে করে আমাদের ডাটা সেট করার আগে যেরকম ফরমেট ছিল ঐরকম ফরমেটে আমাদের কাছে আসে। মেথডটি হলো JSON.parse()

useCase -

JSON.parse(localStorage.getItem("key_name"));

localStorage.remove()

অনেক সময় আমাদের লোকাল স্টোরেজের তথ্যের মধ্যে থেকে যেকোনো তথ্য সরিয়ে ফেলার প্রয়োজন হতে পারে সেক্ষেত্রে আমরা এই মেথডটি কল করতে পারি এবং এখানে আমরা ওই ডাটার key পাস করে দেব যেই ডাটা আমরা রিমুভ করতে চাচ্ছি।

LocalStorage এ কিভাবে মাল্টিপল ডাটা রাখা যায়?

স্বাভাবিকভাবে আমরা যখন লোকাল স্টোরেজে কোন ডাটা সেট করি তখন একটিমাত্র ডাটা সেট করতে পারি অথবা অবজেক্ট। কিন্তু আমাদের অনেক সময় প্রয়োজন হয় যে ইউজার নিজে থেকে অবজেক্ট ক্রিয়েট করবে ( ডায়নামিক ভাবে ) এবং সেগুলো আমরা লোকাল স্টোরেজে একটি array এর মধ্যে রাখবো এবং ওই এরে তে যতক্ষণ ইউজার অবজেক্ট ক্রিয়েট করবে ততক্ষণ নতুন নতুন অবজেক্ট বসতে থাকবে। মানে আমরা একটি array এর মধ্যে অনেকগুলো অবজেক্ট রাখব এবং সেগুলো আমরা একটি একটি করে আমাদের ব্রাউজারে দেখাতে পারব। সেটা করার জন্য নিচের দেয়া কোড আপনি ফলো করতে পারেনঃ

// আপনি আপনার array টি আগে গেট করে নিন কন্ডিশনের মাধ্যমে যদি কোনো
// না থাকে তাহলে একটি empty array পাস করে দিন। 
let userAddress = JSON.parse(localStorage.getItem("newAddressCreate")) || "[]"

// আপনার সব ডাটা দিয়ে প্রথমে একটি অব্জেক্ট তৈরি করুন।
let data = {
        country,
        city,
        address1,
        address2,
        zipCode,
        addressType,
        phoneNumber,
  };

// userAddress হচ্ছে একটি array এবং আপনি ওই array এর মধ্যে আপনার 
// data নামে যে অব্জেক্ট আছে ওইটা push করে দেন।
userAddress.push(data);

// এখন আপনার ডাটাগুলো localStorage এ সেট করে দিন।
localStorage.setItem("newAddressCreate", JSON.stringify(userAddress));

উপরের উদাহরণের মাধ্যমে প্রতিবার ইউজার যখন নতুন ডাটা তৈরি করবে তখন সব ডাটা মিলে একটা অব্জেক্ট তৈরি হবে এবং ওই অব্জেক্টটি localStorage এ একটি array এর মধ্যে অব্জেক্ট হয়ে যুক্ত হতে থাকবে।

localStorage VS sessionStorage

localStorage

localStorage হচ্ছে একটি স্থায়ী সংরক্ষণগার, যেখানে আমরা কোন ডাটা রাখলে সেগুলা আমরা রিমুভ করার আগ পর্যন্ত ওইখানেই থাকবে।

sessionStorage

sessionStorage হচ্ছে এমন একটা স্টোর যেখানে আমরা যদি কোন ওয়েবসাইটের ডাটা সংরক্ষণ করে রাখি তাহলে ওই ওয়েবসাইটের ট্যাব ক্লোজ করার মাধ্যমেই সেশন স্টোরেজ থেকে সব ডাটা রিমুভ হয়ে যাবে।

এক কথায়, সেশন স্টোরেজে কোন ডাটা রাখলে ব্রাউজার ক্লোজ করা অথবা ট্যাব ক্লোজ করার মাধ্যমেই ওই ডাটা গুলা রিমুভ হয়ে যায় আর লোকাল স্টোরেজ এ কোন ডাটা রাখলে ওই ডাটা লাইফ টাইম স্থায়ী হয়ে থাকে ওই জায়গায় যতক্ষণ পর্যন্ত ম্যানুয়ালি ওই ডাটা গুলা লোকাল স্টোরেজ থেকে রিমুভ করা না হয়।

লোকাল স্টোরেজের সমস্যা

আমরা যখন লোকাল স্টোরেজ থেকে কোন ডাটা আনি তখন সেটা refresh ছাড়া আমাদের আপডেট দেয় না এতে করে আমাদের আপডেট ডাটা পেতে ম্যানুয়ালি রিফ্রেস দেওয়া লাগে অথবা ইভেন্ট কলের মাধ্যমে আমরা ডায়নামিক ভাবে রিফ্রেশ দিতে হয়। আমার জানামতে লোকাল স্টোরেজে কোন ডাটা গেট করতে গেলে refresh দেয়া লাগেই। আপনি যদি এর solution জেনে থাকেন থাহলে অবশ্যই আপনি নিচে কমেন্ট বক্সে আমাকে জানিয়ে দিবেন।