অবশ্যই, নিচে একটি বাংলা ব্লগ পোস্ট দেওয়া হলোঃ "LocalStorage নিয়ে খেলা করি — JavaScript এ ডেটা সংরক্ষণের সহজ কৌশল" শিরোনামে।

🗃️ LocalStorage নিয়ে খেলা করি — JavaScript এ ডেটা সংরক্ষণের সহজ কৌশল

লিখেছেন: Md. Mojnu Miah প্রকাশকাল: ৫ জুন ২০২৫

✨ ভূমিকা

আমরা যখন কোনো ওয়েবসাইটে কাজ করি, অনেক সময় ইউজারের তথ্য সাময়িকভাবে ব্রাউজারে সংরক্ষণ করতে হয় — যেনো ইউজার আবার ফিরে এলে বা পেজ রিফ্রেশ করলেও তথ্য হারিয়ে না যায়। ঠিক এই কাজটিই করতে পারে localStorage।

আজকের ব্লগে আমরা দেখবো কিভাবে JavaScript দিয়ে localStorage ব্যবহার করে ডেটা সংরক্ষণ, পড়া, আপডেট এবং মুছে ফেলা যায় — একদম খেলার মতো সহজভাবে!

🔐 LocalStorage কি?

localStorage হলো ব্রাউজার-ভিত্তিক এক ধরনের Web Storage API যা কী-ভ্যালু (key-value) আকারে ডেটা সংরক্ষণ করে এবং ডেটা কখনোই মুছে যায় না যতক্ষণ না আপনি নিজে মুছেন।

• এটি শুধুমাত্র স্ট্রিং ডেটা সংরক্ষণ করতে পারে।
• এটি একই ডোমেইনের জন্য কাজ করে।
• এর ডেটা ব্রাউজার বন্ধ করলেও থেকে যায়।

✅ কিভাবে ডেটা রাখা যায়?

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

📝 এখানে "name" হচ্ছে key এবং "Mojnu" হচ্ছে value। এটা ব্রাউজারে স্থায়ীভাবে সংরক্ষিত থাকবে।

🔍 কিভাবে ডেটা পড়া যায়?

const userName = localStorage.getItem("name");
console.log(userName); // "Mojnu"

❌ কিভাবে ডেটা মুছে ফেলা যায়?

localStorage.removeItem("name");

🧹 সব ডেটা একসাথে মুছে ফেলতে চাইলে?

localStorage.clear();

এটি সব কী-ভ্যালু একবারে মুছে ফেলবে।

🎁 JSON ডেটা কিভাবে সংরক্ষণ করবেন?

যেহেতু localStorage শুধুমাত্র স্ট্রিং নেয়, তাই অবজেক্ট বা অ্যারে রাখতে হলে JSON.stringify() দিয়ে কনভার্ট করে নিতে হয়।

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

পড়ার সময় আবার পার্স করতে হয়:

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "Mojnu"

🎮 চলো একটু খেলা করি!

ধরুন আমরা একটি টেক্সট ফিল্ড তৈরি করবো, যেখানে ইউজার নাম লিখবে, আর আমরা সেটা localStorage এ সংরক্ষণ করবো।

✅ HTML:

<input type="text" id="usernameInput" placeholder="তোমার নাম লিখো" />
<button onclick="saveName()">সংরক্ষণ করো</button>

✅ JavaScript:

function saveName() {
  const input = document.getElementById("usernameInput").value;
  localStorage.setItem("name", input);
  alert("তোমার নাম সংরক্ষণ করা হয়েছে!");
}

এভাবে আপনি ওয়েব অ্যাপে ব্যবহারকারীর নাম সংরক্ষণ করতে পারবেন।

📚 উপসংহার

localStorage হলো ওয়েব অ্যাপে ছোট ছোট তথ্য জমিয়ে রাখার জন্য একটি অসাধারণ সহজ ও কার্যকরী পদ্ধতি। ছোট প্রজেক্ট, থিম পছন্দ, ইউজার সেটিংস কিংবা লগইন টোকেন — সব কিছুতেই ব্যবহার করতে পারেন এটি।

তবে মনে রাখবেন — এটি নিরাপদ নয়, সেনসিটিভ তথ্য যেমন পাসওয়ার্ড বা কার্ড নম্বর এখানে রাখা উচিত না।

🔔 আপনি যদি এই টিউটোরিয়াল ভালোবাসেন, তাহলে শেয়ার করুন আপনার বন্ধুদের সাথে! মন্তব্যে জানান — আপনি localStorage দিয়ে কী কী খেলেছেন? 😄

ধন্যবাদ! — Mojnu Miah

অবশ্যই Md. Mojnu Miah ভাই! নিচে আমি React এ একটি Advanced LocalStorage ব্যবহার দেখাচ্ছি, যেখানে আমরা একটি Array of Object রাখবো, সেটা দেখবো, নতুন item যোগ করবো, localStorage-এ আপডেট করবো — সবকিছু স্টেপ বাই স্টেপ বুঝিয়ে দিবো।

🧠 লক্ষ্য:

• আমরা একটি টুডু লিস্ট বানাবো, যেখানে প্রতিটি টাস্ক একটা অবজেক্ট হবে।
• সব টাস্ক localStorage-এ থাকবে।
• ইউজার পেজ রিফ্রেশ করলে ডেটা হারাবে না।

📁 Step-by-step React Example

🧾 টাস্ক অবজেক্ট কেমন হবে?

{
  id: 1,
  text: "BCS পড়া শুরু করো",
  done: false
}

✅ App.jsx (পুরো কোড নিচে + ব্যাখ্যা):

import { useState, useEffect } from "react";
 
const LOCAL_KEY = "tasks";
 
function App() {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState("");
 
  // ✅ প্রথমে LocalStorage থেকে ডেটা লোড করবো
  useEffect(() => {
    const stored = localStorage.getItem(LOCAL_KEY);
    if (stored) {
      setTasks(JSON.parse(stored));
    }
  }, []);
 
  // ✅ tasks আপডেট হলে LocalStorage-এ সেট করবো
  useEffect(() => {
    localStorage.setItem(LOCAL_KEY, JSON.stringify(tasks));
  }, [tasks]);
 
  const addTask = () => {
    if (!text.trim()) return;
    const newTask = {
      id: Date.now(),
      text,
      done: false,
    };
    setTasks([...tasks, newTask]);
    setText("");
  };
 
  const toggleDone = (id) => {
    const updated = tasks.map((task) =>
      task.id === id ? { ...task, done: !task.done } : task
    );
    setTasks(updated);
  };
 
  const deleteTask = (id) => {
    const filtered = tasks.filter((task) => task.id !== id);
    setTasks(filtered);
  };
 
  return (
    <div className="p-4 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-4">📝 আমার টাস্ক লিস্ট</h1>
      <div className="flex gap-2 mb-4">
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="নতুন টাস্ক লিখো..."
          className="border p-2 flex-1"
        />
        <button
          onClick={addTask}
          className="bg-blue-500 text-white px-4 rounded"
        >
          ➕ যোগ করো
        </button>
      </div>
 
      <ul>
        {tasks.map((task) => (
          <li
            key={task.id}
            className={`flex justify-between items-center mb-2 p-2 border rounded ${
              task.done ? "bg-green-100 line-through" : ""
            }`}
          >
            <span
              onClick={() => toggleDone(task.id)}
              className="cursor-pointer"
            >
              {task.text}
            </span>
            <button
              onClick={() => deleteTask(task.id)}
              className="text-red-500"
            >
              ❌
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
 
export default App;

📚 ব্যাখ্যা:

✅ useEffect দিয়ে লোড এবং সংরক্ষণ:

useEffect(() => {
  const stored = localStorage.getItem(LOCAL_KEY);
  if (stored) setTasks(JSON.parse(stored));
}, []);

প্রথমে আমরা localStorage থেকে JSON data read করি।

useEffect(() => {
  localStorage.setItem(LOCAL_KEY, JSON.stringify(tasks));
}, [tasks]);

যখনই tasks স্টেট চেঞ্জ হয়, আমরা সেটা আবার localStorage-এ লিখি।

✅ Array of Object Handling:

• আমরা নতুন টাস্ক অ্যাড করি:

  const newTask = { id, text, done: false };
  setTasks([...tasks, newTask]);

• done toggle করি:

  tasks.map((task) =>
    task.id === clickedId ? { ...task, done: !task.done } : task
  );

• ডিলিট করতে filter:

  tasks.filter((task) => task.id !== deleteId);

🛠️ Bonus Tip:

React Component কে আরো পরিষ্কার রাখতে চাইলে:

• TaskList.jsx
• AddTask.jsx
• useLocalStorage.js নামে কাস্টম হুক তৈরি করে আলাদা ফাইল বানাতে পারো।

📦 আপনার প্রজেক্টে ব্যবহার করতে চাইলে

১. Tailwind install করে নাও (ঐচ্ছিক): ২. এই কোড কপি করে App.jsx তে বসিয়ে রানে দেখো। ৩. এটি আপনার ছোট React প্রজেক্টে localStorage শেখার একটি পারফেক্ট base হতে পারে।

🔚 উপসংহার

localStorage দিয়ে শুধু স্ট্রিং না, পুরো অ্যারে অবজেক্টও রাখা যায়, React-এ সেটা আমরা স্টেটের সাথে ম্যানেজ করতে পারি খুব সহজে। পেজ রিফ্রেশ করলেও ইউজারের টাস্ক বা ডেটা হারায় না — যা ইউজার এক্সপেরিয়েন্স উন্নত করে।

📥 যদি আরও চাও:

• ✅ কাস্টম হুক বানানো
• ✅ React Context + localStorage
• ✅ Multi-user support

তাহলে কমেন্ট করো, আমি সেটা পরবর্তী ব্লগে বা রিপ্লাইতে দিচ্ছি।

তোমার জন্যে চাইলে আমি Tailwind + React দিয়ে এই টাস্ক লিস্টটাকে এনিমেশনসহ আরও সুন্দর করে GitHub + Live Site করে দিতে পারি। বললেই হবে ভাই। 😎