JavaScript Web Storage API – সম্পূর্ণ বাংলা টিউটোরিয়াল
বর্তমানে ওয়েব অ্যাপ্লিকেশনগুলোতে ডেটা স্টোরেজের জন্য Web Storage API খুবই গুরুত্বপূর্ণ। এটি সহজ, দ্রুত এবং ব্যবহারকারী ব্রাউজারে ডেটা সংরক্ষণ করার জন্য ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা JavaScript Web Storage API সম্পর্কে বিস্তারিত জানব।
Web Storage API কী?
Web Storage API হল একটি ব্রাউজার API যা localStorage এবং sessionStorage নামে দুটি প্রকারের ডেটা স্টোরেজ সুবিধা দেয়। এটি কুকিজের বিকল্প এবং অনেক বেশি সুবিধাজনক।
| Storage Type | ব্যাখ্যা | ডেটা সংরক্ষণের সময়কাল |
|---|---|---|
| localStorage | ব্রাউজারের মধ্যে ডেটা সংরক্ষণ করে, যা ব্রাউজার বন্ধ করলেও থাকে। | সর্বদা পর্যন্ত (persistent) |
| sessionStorage | ডেটা শুধুমাত্র বর্তমান সেশন পর্যন্ত থাকে। ব্রাউজার বা ট্যাব বন্ধ করলে ডেটা মুছে যায়। | সেশন শেষ হওয়া পর্যন্ত |
Web Storage এর প্রধান মেথড ও প্রপার্টি
setItem(key, value)– একটি key-value পেয়ার সংরক্ষণ করে।getItem(key)– নির্দিষ্ট key এর মান রিটার্ন করে।removeItem(key)– নির্দিষ্ট key মুছে দেয়।clear()– সমস্ত ডেটা মুছে ফেলে।key(index)– index দিয়ে key রিটার্ন করে।length– স্টোরেজের আইটেমের সংখ্যা দেখায়।
localStorage ব্যবহার উদাহরণ
<script>
console.log(“LocalStorage উদাহরণ:”);
// ডেটা সংরক্ষণ
localStorage.setItem(“username”, “abul”);
// ডেটা নেয়া
let name = localStorage.getItem(“username”);
console.log(“User Name:”, name);
// ডেটা মুছে ফেলা
// localStorage.removeItem(“username”);
// সমস্ত ডেটা মুছে ফেলা
// localStorage.clear();
</script>
sessionStorage ব্যবহার উদাহরণ
<script>
console.log(“SessionStorage উদাহরণ:”);
// সেশন ডেটা সংরক্ষণ
sessionStorage.setItem(“tempData”, “এই ডেটা ট্যাব বন্ধ করলে চলে যাবে”);
// ডেটা পাওয়া
let temp = sessionStorage.getItem(“tempData”);
console.log(“Session Data:”, temp);
// ডেটা মুছে ফেলা
// sessionStorage.removeItem(“tempData”);
// সমস্ত সেশন ডেটা মুছে ফেলা
// sessionStorage.clear();
</script>
কখন Web Storage ব্যবহার করবেন?
- ব্যবহারকারীর প্রেফারেন্স বা সেটিংস সংরক্ষণ করতে
- ফর্ম ডেটা সাময়িকভাবে সেভ করতে
- ছোট পরিমাণ ডেটা ব্রাউজারে সেভ করতে
- কুকি কমিয়ে দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে
Web Storage API এর সীমাবদ্ধতা
- প্রতি ডোমেইনে মাত্র 5MB পর্যন্ত ডেটা সংরক্ষণ সম্ভব।
- এটি শুধুমাত্র স্ট্রিং ফরম্যাটে ডেটা সেভ করে, তাই অবজেক্ট সংরক্ষণের জন্য JSON.stringify এবং JSON.parse ব্যবহার করতে হবে।
- ব্রাউজার ক্লিয়ার করলে ডেটা চলে যেতে পারে।
অবজেক্ট বা অ্যারে localStorage এ সংরক্ষণ
Web Storage স্ট্রিং ছাড়া অন্য ধরনের ডেটা সরাসরি সেভ করতে পারে না। তাই অবজেক্ট বা অ্যারে সংরক্ষণের জন্য JSON ব্যবহার করা হয়।
const user = {
name: “Rahim”,
age: 25,
city: “Dhaka”
};// অবজেক্টকে JSON স্ট্রিং এ রূপান্তর
localStorage.setItem(“userInfo”, JSON.stringify(user));
// ডেটা নেওয়া এবং JSON থেকে অবজেক্টে রূপান্তর
const userData = JSON.parse(localStorage.getItem(“userInfo”));
console.log(userData.name); // Rahim
</script>
Web Storage API এর নিরাপত্তা বিষয়ক সতর্কতা
- সেনসিটিভ ডেটা (যেমন পাসওয়ার্ড) Web Storage এ রাখা উচিত নয়।
- ব্রাউজার এক্সটেনশন বা থার্ড পার্টি স্ক্রিপ্ট ডেটা এক্সেস করতে পারে।
- Cross-site scripting (XSS) আক্রমণ থেকে সুরক্ষার জন্য সতর্ক থাকতে হবে।
উপসংহার
JavaScript Web Storage API ওয়েব ডেভেলপমেন্টে একটি শক্তিশালী টুল। এটি ব্যবহার করে দ্রুত এবং সহজে ব্রাউজারের মধ্যে ডেটা সংরক্ষণ ও পুনঃপ্রাপ্তি সম্ভব। তবে নিরাপত্তা বিষয়ক সতর্কতা মেনে চলা জরুরি।