কম্পিউটার টিউটোরিয়াল

HTML5-এ ক্লায়েন্ট-সাইড ব্রাউজার ডেটাবেস: অপশনগুলো কী কী?

HTML5 ক্লায়েন্ট-সাইড স্টোরেজ অপশনসমূহ

স্টোরেজক্ষমতাপারসিস্টেন্সসিনক্রোনাস/অ্যাসিঙ্কব্রাউজার সাপোর্টউপযোগী Кейস
localStorage ~5-10 MB চিরস্থায়ী (ম্যানুয়াল ক্লিয়ার না হয় পর্যন্ত) সিনক্রোনাস (ব্লকিং) সব ব্রাউজার (IE8+) সেটিংস, টোকেন, ছোট ডেটা, অফলাইন ক্যাশে
sessionStorage ~5-10 MB ট্যাব/উইন্ডো বন্ধ হলে ক্লিয়ার সিনক্রোনাস সব ব্রাউজার (IE8+) সেশন-স্পেসিফিক স্টেট, ফর্ম ড্রাফট
IndexedDB স iniziò ৫০MB-৫০০MB+ (ডিভাইস/ব্রাউজার অনুযায়ী) চিরস্থায়ী অ্যাসিঙ্ক্রোনাস (Promise/Event-based) সব আধুনিক ব্রাউজার (IE10+) বড় ডেটা, স্ট্রাকচার্ড কোয়েরি, ইনডেক্স, অফলাইন অ্যাপ
Cache API / Service Worker ডাইনামিক (StorageManager API দিয়ে কোটা চেক) চিরস্থায়ী (ম্যানুয়াল/পলিসি অনুযায়ী) অ্যাসিঙ্ক্রোনাস সার্ভিস ওয়ার্কার সাপোর্টিং ব্রাউজার অফলাইন পেজ/एसেট ক্যাশিং, নেটওয়ার্ক ইন্টারসেপ্ট
Cookies 4 KB / ডোমেইন এক্সপায়ারি অনুযায়ী সিনক্রোনাস (HTTP হেডার) সব অথেনটিকেশন, ট্র্যাকিং, সার্ভার-সাইড স্টেট
File System Access API অসীম (ব্যবহারকারীর পারমিশন) চিরস্থায়ী (রিয়েল ফাইল) অ্যাসিঙ্ক্রোনাস Chrome 86+, Edge 86+ ফাইল এডিটর, IDE, মিডিয়া অ্যাপ
OPFS (Origin Private File System) অসীম (অরিজিন-আইসোলেটেড) চিরস্থায়ী অ্যাসিঙ্ক্রোনাস (Sync Access Handle-ও আছে) Chrome 102+, Firefox 111+, Safari 15.2+ উচ্চ-পারফরম্যান্স ফাইল I/O (WASM, ভিডিও এডিটর)

স Faces সুপারিশ

  • সিম্পল কি-ভ্যালু: `localStorage` / `sessionStorage`।
  • বড়/স্ট্রাকচার্ড ডেটা, কোয়েরি, ইনডেক্স: `IndexedDB` (লাইব্রেরি: Dexie.js, idb, RxDB)।
  • অফলাইন ফার্স্ট PWA: `Cache API` + `Service Worker` + `IndexedDB`।
  • ব্যবহারকারীর ফাইল সিস্টেমে রিয়েল ফাইল: `File System Access API` / `OPFS`।

localStorage উদাহরণ (আর্টিকেল থেকে রিফাইনড)

            
  1. HTML5 localStorage এবং sessionStorage ব্যবহার

  2. HTML5 localStorage API ব্যবহার করে ব্রাউজারে ডেটা সংরক্ষণ

  3. HTML5-এ ক্যানভাসের জন্য ফ্রি লাইব্রেরিগুলো

  4. ফেসবুক ভাঙা উচিত কি? কী কী অপশন আছে?