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

এই অধ্যায়ে শিখবো ব্রাউজারের Local Storage ও Session Storage কী, কেন দরকার এবং কিভাবে JavaScript দিয়ে এগুলো ব্যবহার করা যায়।

১. Web Storage কী?

Web Storage হলো ব্রাউজারের একটি সহজ উপায়, যা ডাটা লোকালি সংরক্ষণ করতে দেয় — অর্থাৎ ব্রাউজারের মধ্যে ডাটা রেখে পরবর্তীতে ব্যবহার করা যায়।

দুটি ধরন আছে:

Local Storage: ব্রাউজার বন্ধ করার পরেও ডাটা থাকে
Session Storage: ব্রাউজার ট্যাব বা উইন্ডো বন্ধ করলে ডাটা মুছে যায়

২. Local Storage ব্যবহার

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

localStorage.setItem('name', 'রিয়াদ');

(খ) ডাটা নেওয়া (Get Item)

let name = localStorage.getItem('name');
console.log(name);  // আউটপুট: রিয়াদ

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

localStorage.removeItem('name');

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

localStorage.clear();

৩. Session Storage ব্যবহার

Local Storage এর মতই, কিন্তু ডাটা ট্যাব বা উইন্ডো বন্ধ হলে মুছে যায়।

sessionStorage.setItem('token', 'abc123');
let token = sessionStorage.getItem('token');
sessionStorage.removeItem('token');
sessionStorage.clear();

৪. উদাহরণ: Local Storage ব্যবহার করে ইউজারের নাম দেখানো

<input type="text" id="username" placeholder="আপনার নাম লিখুন">
<button id="saveBtn">সেভ করো</button>
<p id="greeting"></p>

<script>
  let input = document.getElementById('username');
  let btn = document.getElementById('saveBtn');
  let greeting = document.getElementById('greeting');

  btn.addEventListener('click', function() {
    let name = input.value;
    localStorage.setItem('username', name);
    greeting.textContent = "স্বাগতম, " + name + "!";
  });

  // পেজ লোড হলে আগের নাম দেখাবে
  window.onload = function() {
    let storedName = localStorage.getItem('username');
    if(storedName) {
      greeting.textContent = "স্বাগতম, " + storedName + "!";
    }
  }
</script>

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

Local Storage ও Session Storage এর মধ্যে পার্থক্য
কিভাবে Local Storage এ ডাটা রাখা, পড়া ও মুছে ফেলা যায়
Session Storage কী ও কখন ব্যবহার করা হয়
একটি সহজ উদাহরণে Local Storage ব্যবহার

পরবর্তী অধ্যায়:
অধ্যায় ২৫: JavaScript Events পুনঃমূল্যায়ন ও Practice

লিখুন: “অধ্যায় ২৫ শুরু করো” — তাহলে আমরা ইভেন্ট নিয়ে আরও গভীর অনুশীলন করবো।

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