Browser APIs — The Power Tools

"Storage, Network & User Interaction"

আমরা এতক্ষণ জাভাস্ক্রিপ্ট ল্যাঙ্গুয়েজ শিখেছি। কিন্তু ব্রাউজারে অ্যাপ বানাতে হলে আমাদের ব্রাউজারের নিজস্ব কিছু পাওয়ারফুল টুল (API) ব্যবহার করতে হয়।

একজন সিনিয়র ডেভেলপার জানে কিভাবে ডাটা ব্রাউজারে সেভ রাখতে হয়, সার্ভার থেকে ডাটা আনতে হয় এবং URL নিয়ে খেলতে হয়।

⭐ ১. Storage API: ব্রাউজারের নিজস্ব মেমোরি

ব্রাউজারে ডাটা সেভ রাখার জন্য আমাদের দুটি প্রধান অপশন আছে। একে তুমি ব্রাউজারের "মিনি ডাটাবেস" বলতে পারো।

A) LocalStorage (স্থায়ী)

ব্রাউজার বন্ধ করে আবার ১ বছর পর ওপেন করলেও ডাটা থাকবে। (যেমন: ডার্ক মোড সেটিংস)

B) SessionStorage (অস্থায়ী)

ট্যাব কেটে দিলেই ডাটা গায়েব। (যেমন: ব্যাংকিং সেশনের তথ্য)

⚠️ The "String Only" Rule (Senior Note)

LocalStorage শুধু String বোঝে। তুমি যদি Object বা Array রাখো, সে সেটাকে "[object Object]" বানিয়ে ফেলবে। তাই সব সময় JSON.stringify (রাখার সময়) এবং JSON.parse (বের করার সময়) করতে হবে।

✅ Best Practice Code (Wrapper Utility)

বারবার JSON.parse না লিখে সিনিয়ররা একটা ইউটিলিটি ফাংশন বানিয়ে নেয়:

// ডাটা সেভ করা
const saveToLocal = (key, data) => {
    localStorage.setItem(key, JSON.stringify(data));
};

// ডাটা বের করা
const getFromLocal = (key) => {
    const data = localStorage.getItem(key);
    return data ? JSON.parse(data) : null; // নাল চেক জরুরি
};

// ব্যবহার:
saveToLocal("user", { name: "Shagor", id: 101 });
const user = getFromLocal("user");
console.log(user.name); // "Shagor"

⭐ ২. Fetch API: সার্ভারের সাথে কথাবার্তা 📡

আগে মানুষ XMLHttpRequest বা AJAX ব্যবহার করত, যা ছিল যন্ত্রণাদায়ক। এখন আমাদের আছে Fetch API।

A) Basic GET Request (Async/Await)

async function getUser(id) {
    try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
        
        // 🚨 Senior Check: ফেচ ৪-০-৪ এরর দিলেও ক্যাচে যায় না!
        if (!res.ok) {
            throw new Error(`Data paini! Status: ${res.status}`);
        }

        const data = await res.json();
        console.log("User Data:", data);
    } catch (error) {
        console.error("Network Error:", error.message);
    }
}

B) POST Request (Authentication সহ)

ডাটা পাঠানো এবং সাথে টোকেন পাঠানো।

async function createPost(postData) {
    const token = localStorage.getItem("authToken"); // টোকেন লোকাল স্টোরেজ থেকে নিলাম

    const res = await fetch("https://api.example.com/posts", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}` // সিকিউর রিকোয়েস্ট
        },
        body: JSON.stringify(postData)
    });
    
    return await res.json();
}

⭐ ৩. URLSearchParams: URL নিয়ে খেলা 🔗

আগে ইউআরএল থেকে ?product=shirt&color=red বের করতে স্ট্রিং কাটাঁছেড়া করতে হতো। এখন এটা এক লাইনের কাজ।

Scenario: তুমি ইকমার্স সাইটে আছো, ইউআরএল হলো: site.com/search?query=iphone&price=50000

// ব্রাউজারের বর্তমান URL এর query অংশ ধরা
const params = new URLSearchParams(window.location.search);

// ১. ভ্যালু বের করা
const product = params.get("query"); // "iphone"
const price = params.get("price");   // "50000"

// ২. নতুন ভ্যালু সেট করা (পেজ রিফ্রেশ ছাড়া)
params.set("sort", "low-to-high");

// ৩. স্ট্রিংয়ে কনভার্ট করা (API তে পাঠানোর জন্য)
console.log(params.toString()); 
// Output: "query=iphone&price=50000&sort=low-to-high"

⭐ ৪. Clipboard API: কপি-পেস্ট ফিচার 📋

মডার্ন অ্যাপে "Copy to Clipboard" বাটন থাকেই।

const copyBtn = document.getElementById("copyBtn");
const codeBlock = "npm install react";

copyBtn.addEventListener("click", async () => {
    try {
        await navigator.clipboard.writeText(codeBlock);
        alert("Code copied! ✅");
    } catch (err) {
        console.error("Copy failed ❌", err);
    }
});

🧠 ৫. Senior Interview Questions (বাংলায়)

Q1: LocalStorage এবং Cookies-এর মধ্যে মূল পার্থক্য কী?

উত্তর:
• Size: Cookies মাত্র 4KB ডাটা রাখতে পারে, LocalStorage পারে প্রায় 5MB।
• Network: প্রতিটা রিকোয়েস্টের সাথে Cookies অটোমেটিক সার্ভারে চলে যায় (ব্যান্ডউইথ নষ্ট হয়), কিন্তু LocalStorage শুধু ব্রাউজারেই থাকে।

Q2: LocalStorage এ সেনসিটিভ ডাটা (যেমন পাসওয়ার্ড) রাখা কি নিরাপদ?

উত্তর: একদমই না! কারণ জাভাস্ক্রিপ্টের মাধ্যমে (XSS Attack) হ্যাকাররা সহজেই LocalStorage এর ডাটা চুরি করতে পারে। তাই এখানে শুধু থিম প্রিফারেন্স বা নন-সেনসিটিভ ডাটা রাখা উচিত।

Q3: Fetch API তে catch কখন কাজ করে?

উত্তর: খুব ট্রিকি প্রশ্ন! সার্ভার যদি 404 Not Found বা 500 Server Error দেয়, তবুও fetch সেটাকে Success মনে করে এবং catch ব্লকে যায় না। catch ব্লকে শুধু তখনই যায় যখন Network Failure হয় (যেমন ইন্টারনেট নেই)। সার্ভার এরর চেক করতে res.ok ব্যবহার করতে হয়।

⭐ ৬. Real-World Mini Project: Theme Switcher 🌗

চলো সব শিখে একটা ছোট ফিচার বানাই যা সব ওয়েবসাইটে থাকে।

// ১. টগল বাটন সিলেক্ট
const toggleBtn = document.getElementById("theme-btn");

// ২. পেজ লোড হলে চেক করো আগে কোনো সেভ করা থিম আছে কিনা
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
    document.body.classList.add(savedTheme);
}

// ৩. বাটনে ক্লিক করলে থিম চেঞ্জ এবং সেভ
toggleBtn.addEventListener("click", () => {
    // বডিতে 'dark' ক্লাস থাকলে সরাও, না থাকলে লাগাও
    document.body.classList.toggle("dark");

    // বর্তমান অবস্থা চেক করো
    const isDark = document.body.classList.contains("dark");

    // লোকাল স্টোরেজে সেভ করো যাতে রিফ্রেশ দিলেও থাকে
    localStorage.setItem("theme", isDark ? "dark" : "light");
});

📊 Storage Methods Comparison

Feature localStorage sessionStorage Cookies
Capacity ~10MB ~5MB 4KB
Expiry Permanent Tab close Manual set
Network ❌ No ❌ No ✅ Yes
Access JavaScript Only JavaScript Only JS + Server

🚀 অধ্যায় ১২ সারাংশ (Checklist)

আমরা শিখলাম:

  • ✓ Storage: LocalStorage পার্মানেন্ট, SessionStorage টেম্পোরারি। ডাটা রাখার সময় JSON.stringify করতে হয়
  • ✓ Fetch: res.ok চেক করা বাধ্যতামূলক। Async/Await দিয়ে কোড ক্লিন রাখা
  • ✓ URL: URLSearchParams দিয়ে কুয়েরি স্ট্রিং রিড এবং রাইট করা
  • ✓ Clipboard: navigator.clipboard দিয়ে কপি ফিচার বানানো

Next Step: ব্রাউজার ফিচার তো শিখলাম। এখন আসব জাভাস্ক্রিপ্টের অন্যতম জটিল কিন্তু সুন্দর টপিক—Object Oriented Programming (OOP)। ক্লাস, ইনহেরিটেন্স এবং প্রোটোটাইপ নিয়ে খেলব। পরের অধ্যায়: "Object Oriented JavaScript (OOP) Deep Dive"।

🔒 কপিরাইট সুরক্ষিত কন্টেন্ট 🔒

কপি, স্ক্রিনশট, প্রিন্ট করা সম্পূর্ণ নিষিদ্ধ।