জাভাস্ক্রিপ্ট এবং স্টোরেজম্যানেজার
এই নিবন্ধে জাভাস্ক্রিপ্ট এবং স্টোরেজম্যানেজার ব্যাখ্যা করা হয়েছে।
StorageManager-এর বৈশিষ্ট্যগুলি আমরা বিস্তারিতভাবে ব্যাখ্যা করব এবং কীভাবে এটি ব্যবহার করতে হয় ধাপে ধাপে কোড উদাহরণের সাথে দেখানো হবে, যা ব্রাউজারে কার্যকর হবে।
YouTube Video
javascript-storage-manager.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & 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 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args
119 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120 .join(" ");
121 output.appendChild(message);
122 };
123
124 // Override console.error
125 const originalError = console.error;
126 console.error = function (...args) {
127 originalError.apply(console, args);
128 const message = document.createElement('div');
129 message.textContent = args
130 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131 .join(" ");
132 message.style.color = 'red'; // Color error messages red
133 output.appendChild(message);
134 };
135 })();
136
137 document.getElementById('executeBtn').addEventListener('click', () => {
138 // Prevent multiple loads
139 if (document.getElementById('externalScript')) return;
140
141 const script = document.createElement('script');
142 script.src = 'javascript-storage-manager.js';
143 script.id = 'externalScript';
144 //script.onload = () => console.log('javascript-storage-manager.js loaded and executed.');
145 //script.onerror = () => console.log('Failed to load javascript-storage-manager.js.');
146 document.body.appendChild(script);
147 });
148 </script>
149</body>
150</html>জাভাস্ক্রিপ্ট এবং স্টোরেজম্যানেজার
ব্রাউজারে localStorage এবং IndexedDB-এর মত ওয়েব স্টোরেজ বৈশিষ্ট্যসমূহ ব্যবহারকারীর ডিভাইসে অ্যাপ্লিকেশনের অবস্থা এবং ডেটা স্থানীয়ভাবে সংরক্ষণের জন্য অপরিহার্য। তবে, যদি স্টোরেজ ক্ষমতা ব্যবস্থাপনা এবং স্থায়িত্ব সম্পর্কে যথেষ্ট তথ্য না থাকে, তাহলে অপ্রত্যাশিতভাবে ডেটা হারিয়ে যেতে পারে।
StorageManager হলো একটি এপিআই, যা ইউজার এজেন্ট (মূলত ব্রাউজার) দ্বারা প্রদান করা হয় এবং এটি স্টোরেজের ব্যবহার এবং স্থায়িত্ব সম্পর্কিত তথ্য জানতে এবং নিয়ন্ত্রিত করতে উপায় প্রদান করে।
StorageManager কী?
StorageManager হলো একটি অবজেক্ট, যা navigator.storage থেকে অ্যাক্সেস করা যায় এবং নিম্নলিখিত প্রধান বৈশিষ্ট্যগুলো প্রদান করে:।
- ইতিমধ্যে ব্যবহৃত এবং বিদ্যমান স্টোরেজ সম্পর্কে তথ্য পাওয়া (
navigator.storage.estimate()) - স্টোরেজের স্থায়িত্ব পরিস্থিতি পরীক্ষা করা (
navigator.storage.persisted()) - স্টোরেজ স্থায়িত্বের অনুরোধ করা (
navigator.storage.persist())
এটি বিশেষভাবে কার্যকর, যদি আপনি Service Workers বা PWA (Progressive Web Apps)-এ স্থায়ী স্টোরেজ নিশ্চিত করতে চান।
উপলব্ধতা পরীক্ষা করা
প্রথমে পরীক্ষা করুন ব্রাউজার কি StorageManager সমর্থন করে কিনা।
1if ('storage' in navigator && 'estimate' in navigator.storage) {
2 console.log("StorageManager is supported.");
3} else {
4 console.warn("StorageManager is not supported in this browser.");
5}- আপনি যাচাই করতে পারেন,
navigator.storageঅবজেক্ট উপস্থিত আছে কি না এবংestimateমেথড আছে কি না, এর মাধ্যমে সমর্থন নির্ধারণ করা যায়।
স্টোরেজ ব্যবহারের তথ্য নেওয়া
navigator.storage.estimate() ব্যবহার করলে, আপনার অ্যাপ্লিকেশন কতটুকু স্টোরেজ ব্যবহার করছে এবং মোট স্টোরেজ কোটা কত, তা জানতে পারবেন।
1async function showStorageUsage() {
2 if (!navigator.storage || !navigator.storage.estimate) {
3 console.warn("StorageManager is not supported.");
4 return;
5 }
6
7 const { usage, quota } = await navigator.storage.estimate();
8 console.log(`Used: ${(usage / 1024 / 1024).toFixed(2)} MB`);
9 console.log(`Total: ${(quota / 1024 / 1024).toFixed(2)} MB`);
10 console.log(`Usage percentage: ${(usage / quota * 100).toFixed(2)}%`);
11}
12
13showStorageUsage();usageদ্বারা বর্তমান ব্যবহারের বাইট সংখ্যা বোঝানো হয় এবংquotaদ্বারা সর্বাধিক উপলব্ধ ধারণক্ষমতা বোঝানো হয়। অন্য ব্যবহারের পাশাপাশি, অ্যাপ্লিকেশন স্টোরেজ সীমার কাছাকাছি এলে ব্যবহারকারীকে জানাতে আপনি স্টোরেজ ব্যবহারে নজর রাখতে পারেন।
স্টোরেজ স্থায়িত্ব পরীক্ষা করা
অনেক ব্রাউজারে, স্টোরেজ 'অস্থায়ী' হিসেবে সংরক্ষিত হয়, অর্থাৎ ডিস্ক স্পেস কমে গেলে স্বয়ংক্রিয়ভাবে মুছে ফেলা হতে পারে। persisted() মেথড ব্যবহার করে আপনি জানতে পারবেন, বর্তমান স্টোরেজ স্থায়ী কিনা।
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();স্টোরেজ স্থায়িত্বের জন্য অনুরোধ
স্টোরেজ ইতিমধ্যে স্থায়ী না হলে, আপনি persist() ব্যবহার করে ব্রাউজার থেকে স্থায়িত্বের অনুরোধ করতে পারেন। তবে, এটি নির্দিষ্ট ব্যবহারকারীর কার্যক্রম বা কিছু শর্তের উপর ভিত্তি করে প্রত্যাখ্যাত হতে পারে।
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();অনেক ব্রাউজারে, নিম্নলিখিত শর্তগুলি পূরণ করলে স্থায়িত্ব অনুমোদন পাওয়ার সম্ভাবনা বেড়ে যায়:।
- অ্যাপটি একটি PWA হিসেবে ইনস্টল করা আছে
- ব্যবহারকারী নিয়মিত অ্যাপটি ব্যবহার করেন
- অ্যাপটি HTTPS পরিবেশে চলছে
- স্থায়িত্বের অনুরোধ নির্দিষ্ট ব্যবহারকারীর ক্রিয়ার সাথে সংযুক্ত, যেমন একটি ক্লিক
ব্যবহারিক উদাহরণ: স্টোরেজ স্থায়ী না হলে ব্যবহারকারীর কাছ থেকে স্থায়িত্বের অনুরোধ
1async function ensurePersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 if (isPersisted) {
4 console.log("Already using persistent storage.");
5 return;
6 }
7
8 const granted = await navigator.storage.persist();
9 if (granted) {
10 alert("Storage has been set to persistent.");
11 } else {
12 alert("Unable to set persistent storage. Your data may be deleted.");
13 }
14}
15
16document.querySelector("#persistButton").addEventListener("click", ensurePersistence);- এই উদাহরণে, ব্যবহারকারী যখন একটি বোতামে ক্লিক করেন তখন স্থায়িত্বের অনুরোধ করা হয়। বোতাম ব্যবহার করলে অনুরোধ ব্যবহারকারীর ক্রিয়ার প্রেক্ষিতে করা হয়, ফলে অনুমোদন পাওয়ার সম্ভাবনা বেশি থাকে।
সতর্কতা এবং সামঞ্জস্যতা
navigator.storageশুধুমাত্র HTTPS পরিবেশে উপলব্ধ।- প্রধান ব্রাউজার (Chrome, Edge, Firefox) এটি সমর্থন করে, তবে Safari-তে কিছু বৈশিষ্ট্য সীমিত।
quotaডিভাইসের স্টোরেজ অবস্থার উপর নির্ভর করে এবং একই সাইটে বিভিন্ন ডিভাইসে ভিন্ন মান হতে পারে।
সারসংক্ষেপ
StorageManager ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলি ব্যবহারকারীর স্থানীয় স্টোরেজ আরও নিরাপদ ও কৌশলগতভাবে ব্যবহার করতে পারে। এটি প্রধানত নিম্নলিখিত বৈশিষ্ট্যগুলি প্রদান করে:।
- আপনি
estimate()ব্যবহার করে স্টোরেজ ব্যবহারের অবস্থা দেখতে পারেন। - আপনি
persisted()দিয়ে স্থায়িত্বের অবস্থা পরীক্ষা করতে পারেন। - আপনি
persist()দিয়ে স্থায়িত্বের অনুরোধ করতে পারেন।
PWA বা অফলাইন-প্রথম অ্যাপ বিকাশের সময়, StorageManager ব্যবহার করলে আপনি একদিকে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে, অন্যদিকে ডেটা সুরক্ষা নিশ্চিত করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।