অধ্যায় ৩৩: JavaScript Local Storage ও Session Storage (বাংলায়)



এই অধ্যায়ে শিখবো কীভাবে ব্রাউজারের ভিতরে ডেটা সংরক্ষণ করা যায় Local Storage এবং Session Storage ব্যবহার করে, এবং তাদের মধ্যে পার্থক্য কী।


১. Local Storage ও Session Storage কী?

  • Local Storage: ব্রাউজারে ডেটা দীর্ঘদিন পর্যন্ত সংরক্ষণ করে।

  • Session Storage: ব্রাউজারের সেশন চলাকালীন ডেটা রাখে, ব্রাউজার ট্যাব বন্ধ করলে ডেটা মুছে যায়।

  • দুটোই key-value জোড়া আকারে ডেটা রাখে এবং ব্রাউজারের Storage API এর অংশ।


২. Local Storage ব্যবহার

ডেটা রাখা (Set Item)

localStorage.setItem('name', 'রাকিব');

ডেটা পাওয়া (Get Item)

let name = localStorage.getItem('name');
console.log(name);  // রাকিব

ডেটা মুছে ফেলা (Remove Item)

localStorage.removeItem('name');

সব ডেটা মুছে ফেলা (Clear All)

localStorage.clear();

৩. Session Storage ব্যবহার

localStorage এর মতোই কাজ করে, শুধু ডেটা সেশন পর্যন্ত থাকে।

sessionStorage.setItem('sessionName', 'রাকিব');
let sessionName = sessionStorage.getItem('sessionName');
console.log(sessionName);

৪. Local Storage ও Session Storage এর পার্থক্য

বিষয় Local Storage Session Storage
ডেটা সংরক্ষণের সময় ব্রাউজার বন্ধ করেও থাকে ব্রাউজার ট্যাব বন্ধ করলে মুছে যায়
ডেটা শেয়ার করা সব ট্যাবে শেয়ার হয় শুধু একই ট্যাবেই থাকে
স্টোরেজ সাইজ প্রায় ৫ মেগাবাইট প্রায় ৫ মেগাবাইট

৫. JSON ডেটা সংরক্ষণ

LocalStorage শুধু স্ট্রিং সেভ করে, তাই অবজেক্ট সেভ করতে JSON ব্যবহার করতে হয়।

let user = { name: "রাকিব", age: 25 };

// সেভ করার আগে JSON স্ট্রিংয়ে রূপান্তর
localStorage.setItem('user', JSON.stringify(user));

// ফেরত পাওয়ার সময় JSON অবজেক্টে রূপান্তর
let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // রাকিব

৬. উদাহরণ: ফর্ম ডেটা সংরক্ষণ

<input type="text" id="username" placeholder="আপনার নাম লিখুন">
<button onclick="saveName()">সেভ করুন</button>
<button onclick="loadName()">লোড করুন</button>

<script>
function saveName() {
  let name = document.getElementById('username').value;
  localStorage.setItem('username', name);
  alert('নাম সংরক্ষণ করা হয়েছে!');
}

function loadName() {
  let name = localStorage.getItem('username');
  if(name) {
    alert('আপনার নাম: ' + name);
  } else {
    alert('কোনো নাম পাওয়া যায়নি');
  }
}
</script>

এই অধ্যায়ের শেষে আপনি শিখলেন:

  • Local Storage ও Session Storage কী

  • কীভাবে ডেটা সংরক্ষণ ও পাওয়া যায়

  • তাদের মধ্যে পার্থক্য

  • অবজেক্ট স্টোর করার জন্য JSON ব্যবহার

  • সহজ উদাহরণ দিয়ে প্রয়োগ


পরবর্তী অধ্যায়:
অধ্যায় ৩৪: JavaScript Date ও Time

লিখুন: “অধ্যায় ৩৪ শুরু করো” — তাহলে শিখবো ডেট ও টাইম নিয়ে কাজ।

Post a Comment

Previous Post Next Post