Recents in Beach

JavaScript localStorage : The complete guide

localStorage কী?

localStorage হলো ব্রাউজারের ভিতরে থাকা একটি ছোট ডাটাবেস,
যেখানে তুমি কী-ভ্যালু (key–value) ফরম্যাটে ডেটা সংরক্ষণ করতে পারো।

একবার তুমি ডেটা সেভ করলে, ব্রাউজার সেটা রেখে দেয়—

  1. পেজ রিফ্রেশ করলে থাকে
  2. ব্রাউজার বন্ধ করলেও থাকে
  3. কম্পিউটার বন্ধ করলেও থাকে

মানে এটা স্থায়ী ডেটা (persistent data)।

localStorage কেন ব্যবহার করা হয়?

✔ ইউজার লগিন স্টেট রাখা

✔ ডার্ক/লাইট থিম মনে রাখা
✔ টোকেন (JWT) সেভ করা
✔ visitor_id, session data রাখা
✔ Cart items (eCommerce) রাখা
✔ Settings / Preferences সংরক্ষণ করা

localStorage কী-ভ্যালু ফরম্যাটে ডেটা রাখে

উদাহরণ:

Key Value
"visitor_id" "abc123xy"
"theme" "dark"
"branch_name" "Dhaka"

সবই string আকারে সেভ হয়।

localStorage এর ৪টি প্রধান ফাংশন

1️⃣ setItem(key, value) → ডেটা সেভ করা

localStorage.setItem("name", "Ibrahim");

2️⃣ getItem(key) → ডেটা পড়া

localStorage.getItem("name"); 
// Output: "Ibrahim"

3️⃣ removeItem(key) → নির্দিষ্ট key ডিলিট করা

localStorage.removeItem("name");

4️⃣clear() → সব ডেটা মুছে ফেলা

localStorage.clear();

localStorage কত ডেটা রাখতে পারে?

প্রায় 5MB ডেটা সেভ করা যায় ব্রাউজার ভেদে।
বেশিরভাগ ক্ষেত্রে স্ট্রিং ডেটা সেভ করা হয়।

localStorage vs sessionStorage

Feature localStorage sessionStorage
Lifetime ব্রাউজার বন্ধ করলেও থাকে Tab বন্ধ করলেই মুছে যায়
Capacity ~5 MB ~5 MB
Scope প্রতি ডোমেইন প্রতি ট্যাব
Use Case Token, visitor_id, settings Temporary data

Example: JSON ডেটা সেভ করা

localStorage শুধুই string সেভ করতে পারে।
তাই JSON সেভ করতে হয় string-এ convert করে।

JSON Save

const user = { name: "Ibrahim", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

JSON Read

const user = JSON.parse(localStorage.getItem("user"));

বাস্তব উদাহরণ (তোমার code এর সাথে মিলানো)

তুমি visitor_id সেভ করেছিলে:

if (!visitorId) {
  visitorId = generateVisitorId();
  localStorage.setItem("visitor_id", visitorId);
}

এখানে হচ্ছে:

  • localStorage চেক করা → visitor_id আছে কিনা

  • না থাকলে generate করে → localStorage এ সেভ

এভাবে visitor আবার আসলে পুরনো visitor_id পাওয়া যাবে

localStorage এক লাইনে ব্যাখ্যা

ব্রাউজারের ভিতরে স্থায়ীভাবে ডেটা সংরক্ষণ করার সুবিধা — যা রিফ্রেশ বা ব্রাউজার বন্ধ করলেও হারায় না।

Post a Comment

0 Comments