এই অধ্যায়ে শিখবো কীভাবে ব্রাউজারের ভিতরে ডেটা সংরক্ষণ করা যায় 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
লিখুন: “অধ্যায় ৩৪ শুরু করো” — তাহলে শিখবো ডেট ও টাইম নিয়ে কাজ।
