Articles
জাভাস্ক্রিপ্ট-এর পরিচিতি
JavaScript এবং `Web Storage`

JavaScript এবং `Web Storage`

এই নিবন্ধে JavaScript এবং Web Storage ব্যাখ্যা করা হয়েছে।

Web Storage হলো ব্রাউজারে ডেটা সংরক্ষণের জন্য একটি শক্তিশালী ও সহজ ব্যবস্থা, যা প্রধানত দুই ধরনের: localStorage এবং sessionStorage নিয়ে গঠিত। আমরা তাদের পার্থক্য, ব্যবহার এবং ব্যবহারিক নমুনা কোড ধাপে ধাপে বোঝাবো।

YouTube Video

javascript-web-storage-iframe.html 
  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5    <title>Web Storage Demo</title>
  6    <style>
  7        * {
  8            box-sizing: border-box;
  9        }
 10
 11        body {
 12            margin: 0;
 13            padding: 1em;
 14            padding-bottom: 10em;
 15            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16            background-color: #f7f9fc;
 17            color: #333;
 18            line-height: 1.6;
 19        }
 20
 21        .container {
 22            max-width: 800px;
 23            margin: 0 auto;
 24            padding: 1em;
 25            background-color: #ffffff;
 26            border: 1px solid #ccc;
 27            border-radius: 10px;
 28            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29        }
 30
 31        .container-flex {
 32            display: flex;
 33            flex-wrap: wrap;
 34            gap: 2em;
 35            max-width: 1000px;
 36            margin: 0 auto;
 37            padding: 1em;
 38            background-color: #ffffff;
 39            border: 1px solid #ccc;
 40            border-radius: 10px;
 41            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42        }
 43
 44        .left-column,
 45        .right-column {
 46            flex: 1 1 200px;
 47            min-width: 200px;
 48        }
 49
 50        h1,
 51        h2 {
 52            font-size: 1.2rem;
 53            color: #007bff;
 54            margin-top: 0.5em;
 55            margin-bottom: 0.5em;
 56            border-left: 5px solid #007bff;
 57            padding-left: 0.6em;
 58            background-color: #e9f2ff;
 59        }
 60
 61        button {
 62            display: block;
 63            margin: 1em auto;
 64            padding: 0.75em 1.5em;
 65            font-size: 1rem;
 66            background-color: #007bff;
 67            color: white;
 68            border: none;
 69            border-radius: 6px;
 70            cursor: pointer;
 71            transition: background-color 0.3s ease;
 72        }
 73
 74        button:hover {
 75            background-color: #0056b3;
 76        }
 77
 78        #output {
 79            margin-top: 1em;
 80            background-color: #1e1e1e;
 81            color: #0f0;
 82            padding: 1em;
 83            border-radius: 8px;
 84            min-height: 200px;
 85            font-family: Consolas, monospace;
 86            font-size: 0.95rem;
 87            overflow-y: auto;
 88            white-space: pre-wrap;
 89        }
 90
 91        .highlight {
 92            outline: 3px solid #ffc107;
 93            /* yellow border */
 94            background-color: #fff8e1;
 95            /* soft yellow background */
 96            transition: background-color 0.3s ease, outline 0.3s ease;
 97        }
 98
 99        .active {
100            background-color: #28a745;
101            /* green background */
102            color: #fff;
103            box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
104            transition: background-color 0.3s ease, box-shadow 0.3s ease;
105        }
106
107        body.dark {
108            background-color: black;
109            color: white;
110        }
111    </style>
112</head>
113
114<body>
115    <button onclick="testLocalStorage()">Test Local Storage</button>
116
117    <script>
118        function testLocalStorage() {
119            // Test operations
120            localStorage.setItem("username", "Alice");     // Save new value
121            localStorage.setItem("username", "Bob");       // Update value
122            localStorage.removeItem("username");           // Remove key
123            localStorage.setItem("theme", "dark");         // Add another key
124            localStorage.clear();                          // Clear all data
125        }
126    </script>
127</body>
128
129</html>
javascript-web-storage.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101
102    body.dark {
103        background-color: black;
104        color: white;
105    }
106  </style>
107</head>
108<body>
109    <div class="container">
110        <h1>JavaScript Console</h1>
111        <button id="executeBtn">Execute</button>
112        <div id="output"></div>
113    </div>
114
115    <div class="container">
116        <h1>IFrame Sample</h1>
117        <iframe src="javascript-web-storage-iframe.html" style="width: 100%;"></iframe>
118    </div>
119
120    <script>
121        // Override console.log to display messages in the #output element
122        (function () {
123            // Override console.log
124            const originalLog = console.log;
125            console.log = function (...args) {
126                originalLog.apply(console, args);
127                const message = document.createElement('div');
128                message.textContent = args.map(String).join(' ');
129                output.appendChild(message);
130            };
131
132            // Override console.error
133            const originalError = console.error;
134            console.error = function (...args) {
135                originalError.apply(console, args);
136                const message = document.createElement('div');
137                message.textContent = args.map(String).join(' ');
138                message.style.color = 'red'; // Color error messages red
139                output.appendChild(message);
140            };
141        })();
142
143        document.getElementById('executeBtn').addEventListener('click', () => {
144            // Prevent multiple loads
145            if (document.getElementById('externalScript')) return;
146
147            const script = document.createElement('script');
148            script.src = 'javascript-web-storage.js';
149            script.id = 'externalScript';
150            //script.onload = () => console.log('javascript-web-storage.js loaded and executed.');
151            //script.onerror = () => console.log('Failed to load javascript-web-storage.js.');
152            document.body.appendChild(script);
153        });
154    </script>
155</body>
156</html>

JavaScript এবং Web Storage

Web Storage কী?

Web Storage হচ্ছে ক্লায়েন্ট সাইডে (ব্যবহারকারীর ব্রাউজারে) ডেটা সংরক্ষণের জন্য একটি API। Cookies-এর মতো নয়, Web Storage HTTP অনুরোধের সাথে পাঠানো হয় না এবং এটি বেশি পরিমাণে স্টোরেজ ক্ষমতা প্রদান করে, ফলে ডেটা ম্যানেজমেন্ট আরও কার্যকর হয়।

Web Storage দুটি ধরনের স্টোরেজ এলাকা প্রদান করে, যা উদ্দেশ্য অনুযায়ী ব্যবহার করা যায়।

  • localStorage localStorage হলো একটি স্থায়ী স্টোরেজ এলাকা। ব্রাউজার বন্ধ করলেও বা কম্পিউটার রিস্টার্ট হলেও ডেটা সংরক্ষিত থাকে। এটি ব্যবহারকারীর সেটিংস বা লগইন অবস্থা মতো দীর্ঘমেয়াদী ডেটা সংরক্ষণে উপযোগী।

  • sessionStorage sessionStorage হলো একটি অস্থায়ী স্টোরেজ এলাকা। এটি শুধুমাত্র একই ট্যাবের মধ্যে কার্যকর, এবং পেজ পুনরায় লোড করার পরেও ডেটা থাকে, তবে ট্যাব বা উইন্ডো বন্ধ করলে স্বয়ংক্রিয়ভাবে ডেটা মুছে যায়। এটি পাতার মধ্যে সাময়িক অবস্থা বজায় রাখতে উপযোগী।

উভয়ই কী-ভ্যালু জোড়া (স্ট্রিং) হিসেবে ডেটা সংরক্ষণ করে।

প্রাথমিক ব্যবহার

ডেটা সংরক্ষণ

ডেটা নিচের মতো সংরক্ষণ করা যায়:।

1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");
  • কী-ভ্যালু জোড়া localStorage অথবা sessionStorage-এ সংরক্ষণের জন্য setItem মেথড ব্যবহার করুন।

ডেটা পুনরুদ্ধার

ডেটা নিচের মতো পুনরুদ্ধার করা যায়:।

1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"
  • getItem() ব্যবহার করে সংরক্ষিত মান পড়ুন।

ডেটা মুছে ফেলা

ডেটা নিচের মতো মুছে ফেলা যায়:।

1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();
  • সংরক্ষিত ডেটা মুছে ফেলার জন্য removeItem() অথবা clear() ব্যবহার করুন।
    • removeItem() শুধুমাত্র নির্দিষ্ট কী-এর সাথে সম্পর্কিত ডেটা মুছে ফেলে।
    • clear() সমস্ত সংরক্ষিত ডেটা মুছে ফেলে।

অবজেক্ট সংরক্ষণ এবং পুনরুদ্ধার

Web Storage শুধুমাত্র স্ট্রিং সংরক্ষণ করতে পারে। তাই অবজেক্ট সংরক্ষণ করার সময় JSON.stringify() ব্যবহার করে সেগুলি স্ট্রিংয়ে রূপান্তর করতে হবে এবং পড়ার সময় JSON.parse() দিয়ে পুনরুদ্ধার করতে হবে।

 1const user = {
 2    name: "JohnDoe",
 3    age: 30
 4};
 5
 6// Save (serialize)
 7localStorage.setItem("user", JSON.stringify(user));
 8
 9// Retrieve (deserialize)
10const savedUser = JSON.parse(localStorage.getItem("user"));
11console.log(savedUser.name); // "JohnDoe"
  • সংরক্ষণের আগে অবজেক্টকে স্ট্রিং-এ রূপান্তর করতে JSON.stringify() ব্যবহার করুন এবং তা ফিরিয়ে আনতে JSON.parse() ব্যবহার করুন।

localStorage এবং sessionStorage এর মধ্যে পার্থক্যের একটি ডেমো 

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <title>Web Storage Demo</title>
 5    </head>
 6    <body>
 7        <input id="input" placeholder="Type your name..." />
 8        <button onclick="saveToLocal()">Save to localStorage</button>
 9        <button onclick="saveToSession()">Save to sessionStorage</button>
10        <button onclick="showValues()">Show Stored Values</button>
11
12        <script>
13            function saveToLocal() {
14                const value = document.getElementById("input").value;
15                localStorage.setItem("name", value);
16                alert("Saved to localStorage");
17            }
18
19            function saveToSession() {
20                const value = document.getElementById("input").value;
21                sessionStorage.setItem("name", value);
22                alert("Saved to sessionStorage");
23            }
24
25            function showValues() {
26                const local = localStorage.getItem("name");
27                const session = sessionStorage.getItem("name");
28
29                alert(`localStorage: ${local}\nsessionStorage: ${session}`);
30            }
31        </script>
32    </body>
33</html>
 1function saveToLocal() {
 2    const value = document.getElementById("input").value;
 3    localStorage.setItem("name", value);
 4    alert("Saved to localStorage");
 5}
 6
 7function saveToSession() {
 8    const value = document.getElementById("input").value;
 9    sessionStorage.setItem("name", value);
10    alert("Saved to sessionStorage");
11}
12
13function showValues() {
14    const local = localStorage.getItem("name");
15    const session = sessionStorage.getItem("name");
16
17    alert(`localStorage: ${local}\nsessionStorage: ${session}`);
18}
  • এই কোড একটি সহজ ডেমো, যেখানে দেয়া নাম localStorage অথবা sessionStorage-এ সংরক্ষণ করা হয় এবং আপনি তাদের মান চেক করতে পারেন।

স্টোরেজ ইভেন্ট পর্যবেক্ষণ

বিভিন্ন ট্যাবে একই localStorage-এ অ্যাক্সেস করার সময়, এক ট্যাবে ডেটা পরিবর্তিত হলে আপনি অন্য ট্যাবে storage ইভেন্ট পর্যবেক্ষণ করতে পারেন।

1window.addEventListener("storage", function(event) {
2    console.log("Storage changed!");
3    console.log(`Key: ${event.key}`);
4    console.log(`Old Value: ${event.oldValue}`);
5    console.log(`New Value: ${event.newValue}`);
6});
  • এই ইভেন্ট শুধুমাত্র localStorage-এ কার্যকর হয় এবং sessionStorage-এ হয় না।
1// Test operations
2localStorage.setItem("username", "Alice");     // Save new value
3localStorage.setItem("username", "Bob");       // Update value
4localStorage.removeItem("username");           // Remove key
5localStorage.setItem("theme", "dark");         // Add another key
6localStorage.clear();                          // Clear all data
  • storage ইভেন্ট একই ট্যাবে সক্রিয় হয় না, তাই আপনি এটি পর্যবেক্ষণ করতে পারবেন যখন অন্য কোনো ট্যাব বা উইন্ডো থেকে localStorage পরিবর্তন করা হয়।

ব্যবহারিক উদাহরণ: ডার্ক মোড অবস্থা সংরক্ষণ 

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <style>
 5        body.dark {
 6            background-color: black;
 7            color: white;
 8        }
 9    </style>
10</head>
11<body>
12    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
13
14    <script>
15        // Load the initial state
16        if (localStorage.getItem("darkMode") === "true") {
17            document.body.classList.add("dark");
18        }
19
20        function toggleDarkMode() {
21            const isDark = document.body.classList.toggle("dark");
22            localStorage.setItem("darkMode", isDark);
23        }
24    </script>
25</body>
26</html>
 1// Load the initial state
 2if (localStorage.getItem("darkMode") === "true") {
 3    document.body.classList.add("dark");
 4}
 5
 6function toggleDarkMode() {
 7    const isDark = document.body.classList.toggle("dark");
 8    localStorage.setItem("darkMode", isDark);
 9}
10
11toggleDarkMode();
  • এই উদাহরণে, প্রতিটি বোতাম ক্লিকে ডার্ক মোড চালু/বন্ধ করে এবং সেই অবস্থা localStorage-এ সংরক্ষণ হয় ও পরবর্তী ভিজিটে পুনরুদ্ধার হয়।

স্টোরেজ সীমা এবং বিবেচনা

Web Storage ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলি বিবেচনা করা উচিত:।

  • স্টোরেজ সীমা এটি ব্রাউজার ও পরিবেশ অনুযায়ী পরিবর্তিত হয়, তবে সাধারণত প্রায় ৫MB হয়ে থাকে।

  • নিরাপত্তা কারণ এটি সরাসরি JavaScript থেকে অ্যাক্সেসযোগ্য, তাই সংবেদনশীল তথ্য সংরক্ষণের জন্য উপযুক্ত নয়।

  • ডেটা স্ট্রিং রূপান্তর সমস্ত ডেটা স্বয়ংক্রিয়ভাবে স্ট্রিং হিসেবে সংরক্ষিত হয়, তাই টাইপ তথ্য সংরক্ষিত থাকে না।

1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）

সারসংক্ষেপ

ওয়েব অ্যাপ্লিকেশনে ক্লায়েন্ট সাইডে সাময়িক বা স্থায়ীভাবে ডেটা সংরক্ষণের জন্য Web Storage একটি অত্যন্ত উপকারী ফিচার। localStorage এবং sessionStorage-এর পার্থক্য ও ব্যবহার, এবং ডেটা সংরক্ষণ ও পুনরুদ্ধারের জন্য JSON.stringify ও JSON.parse ব্যবহার শিখা গুরুত্বপূর্ণ। ঠিকভাবে ব্যবহার করলে এটি ব্যবহারকারীর অভিজ্ঞতা অনেক উন্নত করতে পারে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

জাভাস্ক্রিপ্ট এবং কুকিজজাভাস্ক্রিপ্ট এবং ইনডেক্সডডিবি