টাইপস্ক্রিপ্ট এবং স্টোরেজম্যানেজার
এই নিবন্ধে টাইপস্ক্রিপ্ট এবং স্টোরেজম্যানেজার ব্যাখ্যা করা হয়েছে।
আমরা টাইপস্ক্রিপ্ট এবং স্টোরেজম্যানেজার বোঝানোর জন্য ব্যবহারিক উদাহরণ দিয়েছি।
YouTube Video
টাইপস্ক্রিপ্ট এবং স্টোরেজম্যানেজার
স্টোরেজম্যানেজার কী?
StorageManager একটি API যা ওয়েব অ্যাপ্লিকেশনগুলোকে জানাতে দেয় কতটা স্টোরেজ তারা ব্যবহার করছে এবং কতটা জায়গা খালি আছে। এটি পার্সিস্টেন্স অনুরোধ (persist())ও প্রদান করে, যাতে ইউজার বা ব্রাউজার স্বয়ংক্রিয়ভাবে ডেটা মুছে না ফেলে। এর ফলে আপনি যাচাই করতে পারেন যথেষ্ট খালি জায়গা আছে কিনা বা ডেটা স্বয়ংক্রিয়ভাবে মুছে যাবে কিনা, যেমন অফলাইন অ্যাপ্লিকেশনের জন্য IndexedDB-তে অনেক ডেটা সংরক্ষণ করলে।
ফিচার ডিটেকশন
প্রথমে, ব্রাউজার navigator.storage সাপোর্ট করে কিনা তা যাচাই করুন।
1// TypeScript: feature detection for StorageManager
2function supportsStorageManager(): boolean {
3 return typeof navigator !== "undefined" &&
4 typeof navigator.storage !== "undefined" &&
5 typeof navigator.storage.estimate === "function";
6}
7
8// Example usage
9if (supportsStorageManager()) {
10 console.log("StorageManager is supported.");
11} else {
12 console.warn("StorageManager not supported. Falling back to localStorage or IndexedDB.");
13}- এই ফাংশনটি ধাপে ধাপে স্টোরেজম্যানেজার API-এর উপস্থিতি যাচাই করে।
- কারণ কিছু ব্রাউজার যেমন Safari-তে
navigator.storageনেই, তাইtypeofব্যবহার করে নিরাপদে তার উপস্থিতি যাচাই করা গুরুত্বপূর্ণ।
স্টোরেজ ব্যবহার অনুমান করুন (estimate())
supportsStorageManager() দিয়ে কার্যকারিতা পরীক্ষা করার পরে, navigator.storage.estimate() থেকে ব্যবহৃত স্থান (usage) এবং কোটার (quota) তথ্য সংগ্রহ করুন।
1// TypeScript: safely get storage estimate
2async function getStorageEstimate(): Promise<{ usage: number; quota: number } | null> {
3 if (!supportsStorageManager()) {
4 console.warn("StorageManager not supported.");
5 return null;
6 }
7
8 const estimate = await navigator.storage.estimate();
9 return { usage: estimate.usage ?? 0, quota: estimate.quota ?? 0 };
10}
11
12// Example usage
13getStorageEstimate().then(result => {
14 if (result) {
15 console.log(`Usage: ${result.usage} bytes / Quota: ${result.quota} bytes`);
16 }
17});- এই ফাংশন সবসময় নিরাপদে চলে এবং যদি ব্রাউজার এটি সাপোর্ট না করে, তাহলে
nullফেরত দেয়। usageএবংquotaঅনুমানমূলক এবং ব্রাউজার ভেদে আলাদা হতে পারে।
ডেটার স্থায়ীত্ব চেয়ে অনুরোধ করুন (persist())
persist() ব্যবহার করুন যাতে গুরুত্বপূর্ণ ডেটা (যেমন অফলাইন ক্যাশ) ব্রাউজারের স্বয়ংক্রিয় ডিলিট থেকে রক্ষা পায়। তবে, এটি সব পরিবেশে সফল হয় না।
1// TypeScript: safely request persistent storage
2async function requestPersistence(): Promise<boolean> {
3 if (!supportsStorageManager()) {
4 console.warn("StorageManager not supported.");
5 return false;
6 }
7
8 if (typeof navigator.storage.persist !== "function") {
9 console.warn("persist() not available in this browser.");
10 return false;
11 }
12
13 try {
14 const granted = await navigator.storage.persist();
15 return Boolean(granted);
16 } catch (err) {
17 console.error("persist() error:", err);
18 return false;
19 }
20}
21
22// Example usage
23requestPersistence().then(granted => {
24 console.log("Persistence granted?", granted);
25});- যদি
persist()সফল হয়, তবে ম্যানুয়ালি ইউজার না করলে ব্রাউজার ডেটা স্বয়ংক্রিয়ভাবে মুছবে না। তবে ইউজারের কার্যকলাপ বা ব্রাউজারের সেটিংসের ওপর নির্ভর করে অনুরোধ প্রত্যাখ্যাত হতে পারে।
ডেটা সংরক্ষণের আগে উপলব্ধ স্টোরেজ পরীক্ষা করুন
বড় ডেটা সংরক্ষণের আগে পর্যাপ্ত ফাঁকা জায়গা আছে কিনা পরীক্ষা করুন, যাতে লেখার সময় ব্যর্থতা (QuotaExceededError) না হয়।
1// TypeScript: ensure enough space before writing
2async function ensureSpaceAndWrite(neededBytes: number, writeFn: () => Promise<void>): Promise<boolean> {
3 const estimate = await getStorageEstimate();
4 if (!estimate) {
5 console.warn("Cannot check storage space. Proceeding without validation.");
6 await writeFn();
7 return true;
8 }
9
10 const free = estimate.quota - estimate.usage;
11 if (free < neededBytes) {
12 console.warn(`Not enough space. Free: ${free} bytes, needed: ${neededBytes} bytes.`);
13 return false;
14 }
15
16 await writeFn();
17 return true;
18}
19
20// Example usage
21ensureSpaceAndWrite(10 * 1024 * 1024, async () => {
22 console.log("Saving large data...");
23});- সংরক্ষণের আগে উপলব্ধ স্টোরেজ পরীক্ষা করলে, অপ্রতুল ধারণক্ষমতার জন্য লেখার ব্যাঘাত হওয়ার ঝুঁকি কমানো যায়।
টাইপস্ক্রিপ্ট-এ localStorage টাইপ-নিরাপদভাবে পরিচালনা করা
localStorage ছোটখাটো কনফিগারেশন ডেটা এবং অনুরূপ তথ্য সংরক্ষণের জন্য সুবিধাজনক।
নিচের ক্লাসটি জেনেরিক্স ব্যবহার করে একটি টাইপ-নিরাপদ র্যাপার তৈরি করে।
1// TypeScript: typed localStorage wrapper
2type Serializer<T> = {
3 serialize: (v: T) => string;
4 deserialize: (s: string) => T;
5};
6
7class TypedLocalStorage<K extends string, V> {
8 constructor(private storage: Storage, private serializer: Serializer<V>) {}
9
10 set(key: K, value: V): void {
11 this.storage.setItem(key, this.serializer.serialize(value));
12 }
13
14 get(key: K): V | null {
15 const raw = this.storage.getItem(key);
16 if (raw === null) return null;
17 try {
18 return this.serializer.deserialize(raw);
19 } catch {
20 return null;
21 }
22 }
23
24 remove(key: K): void {
25 this.storage.removeItem(key);
26 }
27
28 clear(): void {
29 this.storage.clear();
30 }
31}
32
33// Example usage
34const jsonSerializer: Serializer<any> = {
35 serialize: v => JSON.stringify(v),
36 deserialize: s => JSON.parse(s),
37};
38
39const appStorage = new TypedLocalStorage<'theme' | 'token', any>(localStorage, jsonSerializer);
40appStorage.set('theme', { dark: true });
41console.log(appStorage.get('theme'));- এই ক্লাসটি ভুল টাইপের ডেটা সংরক্ষণ বা পুনরুদ্ধারের ঝুঁকি কমায়।
ব্যবহারিক বিষয় এবং সেরা চর্চা
-
ব্রাউজার StorageManager সাপোর্ট করে কিনা সর্বদা পরীক্ষা করুন StorageManager তুলনামূলক নতুন API হওয়ায়, ব্যবহারের আগে তার উপস্থিতি অবশ্যই নিশ্চিত করুন।
-
স্টোরেজ সীমা এবং সামঞ্জস্যের প্রতি মনোযোগ দিন
estimate()যে মান ফেরত দেয় তা ব্রাউজারভেদে ভিন্ন, এবং এটি শুধুই অনুমান। -
অ্যাসিঙ্ক্রোনাস API বিবেচনায় রেখে ডিজাইন করুন
estimate()এবংpersist()প্রমিস-ভিত্তিক অ্যাসিঙ্ক্রোনাস API। আপনার কোড এমনভাবে ডিজাইন করুন যাতে UI ব্লক না হয়। -
নিরাপত্তা বিবেচনা
localStorage-এ এক্সেস টোকেন-এর মতো গুরুত্বপূর্ণ তথ্য সংরক্ষণ করবেন না। সম্ভব হলে HttpOnly কুকি বা এনক্রিপশন ব্যবহারের কথা বিবেচনা করুন। -
ফলব্যাক ডিজাইন যদি
supportsStorageManager()ফালস ফেরত দেয়, তাহলে শুধুমাত্রlocalStorageবাIndexedDBব্যবহারের জন্য লজিক দিন।
সারসংক্ষেপ
supportsStorageManager() ব্যবহার করে ফিচার ডিটেকশন করলে, আপনি নিরাপদে সব পরিবেশে সাপোর্ট দিতে পারেন, navigator.storage.estimate() দিয়ে ব্যবহৃত পরিমাণ ও কোটা পরীক্ষা করতে পারেন, এবং persist()-এর মাধ্যমে পার্সিস্টেন্স অনুরোধ করতে পারেন। টাইপস্ক্রিপ্ট-এ র্যাপার ফাংশন ও টাইপ ডেফিনিশন ব্যবহার করে পাঠযোগ্য ও নিরাপদ কোড লিখুন। মৌলিক ধাপগুলো হলো: উপস্থিতি পরীক্ষা, অনুমান করা, পার্সিস্টেন্স অনুরোধ, এবং স্টোরেজে লেখার আগে ধারণক্ষমতা যাচাই।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।