ওয়েব অ্যাপ্লিকেশন খুব দ্রুত জটিল হয়ে যায়। আমার ডেভেলপার জীবনে শিখেছি যে সাদা জাভাস্ক্রিপ্ট দিয়েও অনেক কিছু করা যায় যদি সুযোগ দিন।
localStorage API একটি শক্তিশালী বিল্ট-ইন ফিচার যা সিম্পল অ্যাপ্লিকেশনের জন্য ডাটাবেসের প্রয়োজন নেই। আমরা এই API ব্যবহার করে ডেটা ব্রাউজারে লোকালি সংরক্ষণ করতে পারি যা অ্যাপ্লিকেশন অ্যাক্সেস করতে পারে।
এই গাইডে জাভাস্ক্রিপ্টে localStorage মেথড কীভাবে ব্যবহার করতে হয় এবং একটি ফর্মের ডেটা পরে জন্য সংরক্ষণ করার উদাহরণ দেখাব।
localStorage কী?
localStorage হলো Web Storage API-এর অংশ। এটি আপনাকে ইউজারের ব্রাউজারে ডেটা সংরক্ষণ করতে দেয় যা আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারে।
স্টোরেজ API উপযোগী কারণ এটি ইউজারের সেশনের সব ডেটা ডাটাবেসে পাঠাতে হয় না। ইউজার ডার্ক মোড অন করলে সেটি ক্লায়েন্ট সাইডে ট্র্যাক করা যায়; ফর্ম সেভ করলে অর্ধেক পূরণ করা ফর্ম ডাটাবেসে রাখতে হয় না।
দুই ধরনের ওয়েব স্টোরেজ রয়েছে: localStorage — ডেটা ব্রাউজার ট্যাব বন্ধ করলেও থাকে, এক্সপায়ারি ডেট নেই। sessionStorage — সেশন শেষ হয়ে যাওয়া পর্যন্ত (ব্রাউজার বন্ধ হওয়া পর্যন্ত) থাকে। এই পোস্টে localStorage-র ওপর ফোকাস করব, কিন্তু সিনট্যাক্স দুটোর একই।
localStorage কীভাবে ব্যবহার করবেন
উদাহরণে যাওয়ার আগে localStorage-এর মেথডগুলো জানা দরকার।
এন্ট্রি তৈরি/আপডেট: setItem()
localStorage.setItem("name", "Linda Carlton"); console.log(localStorage);
ফলাফল: { name: "Linda Carlton", length: 1 }। localStorage কি-ভ্যালু পেয়ার আকারে ডেটা স্টোর করে।
ভ্যালু রিট্রিভ: getItem()
localStorage.getItem("name");
ফলাফল: Linda Carlton।
ডেটা মুছে ফেলা: দুটি মেথড রয়েছে — removeItem() (একটি আইটেম মুছে ফেলা) এবং clear() (সব আইটেম মুছে ফেলা)।
localStorage.removeItem("name"); console.log(localStorage);
ফলাফল: { length: 0 }। মনে রাখবেন localStorage শুধু স্ট্রিং স্টোর করতে পারে।
localStorage দিয়ে ফর্ম সেভ ফিচার বানানো
বড় ফর্ম পূরণ করার সময় পরবর্তীতে ফিরে আসার সুবিধা থাকলে ভালো লাগে। অনেক সাইটে "save form" ফিচার থাকে। কিছু ডাটাবেসে রাখে, কিন্তু আমরা লাইটওয়েট ভার্সন localStorage দিয়ে বানাব।
ফ্রন্ট-এন্ড তৈরি
"The Little Tea House" নামক একটি চা দোকানের কাস্টমার ফিডব্যাক ফর্ম বানাব। index.html ফাইল তৈরি করুন:
<!DOCTYPE html> <html> <head> <title>The Little Tea House Feedback</title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div> <h1>The Little Tea House: Customer Feedback</h1> <p>How was your experience at The Little Tea House? We'd love to learn more!</p> <form> <label for="name">Name: </label> <input id="name" type="text" /><br /><br /> <label for="email">Email: </label> <input id="email" type="email" /><br /><br /> <label for="feedback">Message: </label><br /><br /> <textarea id="feedback"></textarea><br /><br /> <button id="saveButton">Save form</button> <button id="retrieveButton">Retrieve form</button> </form> </div> <script src="./form.js"></script> </body> </html>
এখন কিছু CSS যোগ করুন (styles.css):
div { margin-left: 15vw; margin-right: 15vw; background-color: lightblue; padding: 20px; }
এখন জাভাস্ক্রিপ্ট লিখুন (form.js)। প্রথমে ফর্ম ফিল্ডের ভ্যালুগুলো সংগ্রহ করুন:
var nameField = document.getElementById("name"); var emailField = document.getElementById("email"); var feedbackField = document.getElementById("feedback");
বাটনগুলোও সিলেক্ট করুন:
var saveButton = document.getElementById("saveButton"); var retrieveButton = document.getElementById("retrieveButton");
এখন সেভ ফাংশন লিখুন:
function saveResponses() { localStorage.setItem("name", nameField.value); localStorage.setItem("email", emailField.value); localStorage.setItem("feedback", feedbackField.value); }
এটি saveResponses() কল না হওয়া পর্যন্ত রান হবে না। বাটনের সাথে লিঙ্ক করুন:
saveButton.addEventListener("click", saveResponses);
এখন রিট্রিভ ফাংশন লিখুন:
function retrieveResponses() { nameField.value = localStorage.getItem("name"); emailField.value = localStorage.getItem("email"); feedbackField.value = localStorage.getItem("feedback"); } retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });
এখন কোড রান করুন। ফর্মে ডেটা দিয়ে "Save form" বাটনে ক্লিক করুন। পেজ রিফ্রেশ করুন এবং "Retrieve form" বাটনে ক্লিক করুন — আপনার ডেটা ফিরে আসবে! ব্রাউজার বন্ধ করলেও ডেটা থাকবে।
দ্রষ্টব্য: সংবেদনশীল তথ্য (পাসওয়ার্ড, ক্রেডিট কার্ড নম্বর ইত্যাদি) localStorage-এ সংরক্ষণ করবেন না। এখানে সব ডেটা প্লেইন টেক্সট আকারে থাকে, কেউ পড়তে পারে।
উপসংহার
localStorage মেথড জাভাস্ক্রিপ্টে লোকালি ডেটা সংরক্ষণ করতে দেয়। টু-ডু লিস্ট, ইউজার প্রেফারেন্স, ফর্ম ডেটা (সংবেদনশীল তথ্য ছাড়া) সেভ করার জন্য এটি ডাটাবেসের চেয়ে ভালো। এটি সেট আপ করা সহজ, ব্যবহার করা সহজ, এবং ১০০% ভ্যানিলা জাভাস্ক্রিপ্ট।
এখন আপনি একজন এক্সপার্ট জাভাস্ক্রিপ্ট ডেভেলপারের মতো localStorage ব্যবহার করতে পারবেন!
