TheLazy.Dev
Portfolio GitHub

Blog

javascript |javascriptwebstorageapi |rsmacademybd |gmmamunh

Web Storage API Explained with Examples

rsmacademybd

RSM Academy BD

Posted on September 20, 2024

Web Storage API Explained with Examples

Web Storage API: বিস্তারিত আলোচনা

Web Storage API হলো জাভাস্ক্রিপ্টের একটি শক্তিশালী API যা ব্রাউজারে ব্যবহারকারীর ডেটা স্টোর করার জন্য ব্যবহৃত হয়। এটি client-side storage-এর মাধ্যমে key-value pair আকারে ডেটা সংরক্ষণ করতে সাহায্য করে। Web Storage API-এর দুটি প্রধান ভাগ রয়েছে:

  1. localStorage: ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।
  2. sessionStorage: ডেটা শুধুমাত্র সেশন (ব্রাউজার ট্যাব বা উইন্ডো) পর্যন্ত থাকে, অর্থাৎ সেশন শেষ হলে (ব্রাউজার বা ট্যাব বন্ধ করলে) ডেটা মুছে যায়।

Web Storage API কেন ব্যবহার করবেন?

  • Client-side ডেটা সংরক্ষণ: এটি ব্যবহার করে সার্ভারকে অপ্রয়োজনীয় ডেটা পাঠানো ছাড়া client-side-এ ডেটা সংরক্ষণ করা যায়।
  • Session এবং Local Storage: Web Storage API session-ভিত্তিক ডেটা সংরক্ষণ বা দীর্ঘমেয়াদী ডেটা সংরক্ষণের দুটি আলাদা পদ্ধতি সরবরাহ করে।
  • কুকিজের চেয়ে উন্নত: কুকিজের তুলনায় Web Storage API নিরাপদ এবং দ্রুত। এটি প্রতি সার্ভার অনুরোধে ডেটা পাঠায় না এবং কুকিজের সীমাবদ্ধতা ছাড়াই বেশি ডেটা সংরক্ষণ করতে পারে।
  • সহজ API: এটি ব্যবহার করা খুবই সহজ এবং key-value pair আকারে ডেটা ম্যানেজ করে।

Web Storage API-এর দুইটি ভাগ:

1. localStorage

localStorage হলো ব্রাউজারের ডেটা স্টোর করার একটি পদ্ধতি, যা ব্রাউজার বন্ধ করলেও থেকে যায়। এটি বেশিরভাগ সময় ব্যবহার করা হয় তখন, যখন আপনি দীর্ঘ সময়ের জন্য ডেটা সংরক্ষণ করতে চান।

localStorage-এর বৈশিষ্ট্য:
  • Persistent Storage: ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।
  • স্টোরেজ সাইজ: সাধারণত প্রতি origin-এ ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়।
  • Key-value pair আকারে ডেটা সংরক্ষণ করা হয়।
localStorage মেথড:
  • localStorage.setItem(key, value): এটি একটি key-value pair সংরক্ষণ করে।
  • localStorage.getItem(key): একটি key-এর জন্য সংরক্ষিত value ফেরত দেয়।
  • localStorage.removeItem(key): নির্দিষ্ট key-এর ডেটা মুছে দেয়।
  • localStorage.clear(): localStorage-এ সংরক্ষিত সমস্ত ডেটা মুছে দেয়।
উদাহরণ: 
// ডেটা সংরক্ষণ
localStorage.setItem('username', 'JohnDoe');

// ডেটা অ্যাক্সেস
const user = localStorage.getItem('username');
console.log(user); // Output: JohnDoe

// ডেটা মুছে ফেলা
localStorage.removeItem('username');

// সমস্ত ডেটা মুছে ফেলা
localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

2. sessionStorage

sessionStorage হল একইভাবে key-value pair আকারে ডেটা সংরক্ষণ করে, তবে এটি session-ভিত্তিক। যখন ব্রাউজারের ট্যাব বা উইন্ডো বন্ধ হয়, sessionStorage-এর ডেটা মুছে যায়।

sessionStorage-এর বৈশিষ্ট্য:
  • Session-based Storage: ডেটা শুধুমাত্র session পর্যন্ত থাকে। ট্যাব বা উইন্ডো বন্ধ করলে ডেটা মুছে যায়।
  • স্টোরেজ সাইজ: সাধারণত প্রতি origin-এ ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়।
  • Key-value pair আকারে ডেটা সংরক্ষণ করা হয়।
sessionStorage মেথড:
  • sessionStorage.setItem(key, value): একটি key-value pair session-এর জন্য সংরক্ষণ করে।
  • sessionStorage.getItem(key): একটি key-এর জন্য session-এ সংরক্ষিত value ফেরত দেয়।
  • sessionStorage.removeItem(key): নির্দিষ্ট key-এর ডেটা মুছে দেয়।
  • sessionStorage.clear(): sessionStorage-এর সমস্ত ডেটা মুছে দেয়।
উদাহরণ: 
// ডেটা সংরক্ষণ
sessionStorage.setItem('sessionKey', 'SessionValue');

// ডেটা অ্যাক্সেস
const sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData); // Output: SessionValue

// ডেটা মুছে ফেলা
sessionStorage.removeItem('sessionKey');

// সমস্ত ডেটা মুছে ফেলা
sessionStorage.clear();
Enter fullscreen mode Exit fullscreen mode

localStorage এবং sessionStorage-এর মধ্যে পার্থক্য

বৈশিষ্ট্য localStorage sessionStorage
ডেটার স্থায়িত্ব ডেটা ব্রাউজার বন্ধ করার পরেও থাকে। ডেটা শুধুমাত্র session পর্যন্ত থাকে। ট্যাব/উইন্ডো বন্ধ হলে মুছে যায়।
স্টোরেজ সাইজ ৫ থেকে ১০ MB, নির্ভর করে ব্রাউজার এবং origin-এর উপর। ৫ থেকে ১০ MB, নির্ভর করে ব্রাউজার এবং origin-এর উপর।
ব্যবহার ক্ষেত্র দীর্ঘ সময়ের জন্য ডেটা সংরক্ষণে ব্যবহৃত হয়। session-specific ডেটা সংরক্ষণে ব্যবহৃত হয়।
মেমরি পরিষ্কার করা ব্যবহারকারী নিজে বা স্ক্রিপ্টের মাধ্যমে clear না করলে ডেটা থাকে। ট্যাব বা উইন্ডো বন্ধ করার সাথে সাথে মুছে যায়।

Web Storage API এর সীমাবদ্ধতা

  1. সাইজ সীমাবদ্ধতা: সাধারণত ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়, যা বড় ডেটা সংরক্ষণের জন্য যথেষ্ট নয়।
  2. Security Risks: sensitive ডেটা (যেমন, পাসওয়ার্ড বা ব্যক্তিগত তথ্য) সংরক্ষণ করার জন্য এটি নিরাপদ নয়। কারণ, এটি সহজেই জাভাস্ক্রিপ্ট কোডের মাধ্যমে অ্যাক্সেস করা যায়।
  3. Single-origin Restriction: Web Storage API কেবলমাত্র একই origin-এর জন্য ডেটা অ্যাক্সেস করতে পারে। ভিন্ন origin বা domain-এ ডেটা শেয়ার করা যায় না।

Web Storage API vs Cookies

বৈশিষ্ট্য Web Storage API Cookies
স্টোরেজ সাইজ ৫ থেকে ১০ MB প্রতি কুকি ৪ KB এর বেশি নয়।
প্রতি রিকোয়েস্টে পাঠানো সার্ভার অনুরোধে ডেটা পাঠানো হয় না। প্রতিটি সার্ভার অনুরোধের সাথে কুকি পাঠানো হয়।
API ব্যবহার সহজ API মেথড যেমন, setItem, getItem। কুকি হ্যান্ডলিং তুলনামূলকভাবে জটিল।
ডেটার স্থায়িত্ব localStorage ডেটা ব্রাউজার বন্ধ করার পরেও থাকে। কুকির সময়সীমা অনুযায়ী স্থায়ী হয়।

ব্যবহারিক উদাহরণ: ডার্ক মোড সেভ করা 

<!DOCTYPE html>
<html>
<head>
  <title>Dark Mode Example</title>
</head>
<body>
  <h1>Toggle Dark Mode</h1>
  <button id="toggleBtn">Toggle Dark Mode</button>

  <script>
    // প্রাথমিকভাবে ডার্ক মোড স্ট্যাটাস লোড করা
    const isDarkMode = localStorage.getItem('darkMode') === 'enabled';

    if (isDarkMode) {
      document.body.classList.add('dark');
    }

    document.getElementById('toggleBtn').addEventListener('click', function() {
      if (document.body.classList.contains('dark')) {
        document.body.classList.remove('dark');
        localStorage.setItem('darkMode', 'disabled');
      } else {
        document.body.classList.add('dark');
        localStorage.setItem('darkMode', 'enabled');
      }
    });
  </script>

  <style>
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

এই উদাহরণে, ব্যবহারকারী যদি ডার্ক মোড চালু করে, তখন localStorage-এ সেট করা হয় যে ডার্ক মোড সক্রিয় আছে। ব্রাউজার বন্ধ করার পরেও ডার্ক মোড সক্রিয় থাকবে যতক্ষণ না এটি বন্ধ করা হয়।

উপসংহার

Web Storage API হল একধরনের ক্লায়েন্ট-সাইড স্টোরেজ যা ডেটা ব্রাউজারে সংরক্ষণ এবং অ্যাক্সেস করার জন্য ব্যবহৃত হয়। এটি ব্যবহার করে আপনি session বা long-term ডেটা সংরক্ষণ করতে পারেন। localStorage এবং sessionStorage আপনাকে ব্যবহারকারীর ইন্টারঅ্যাকশন উন্নত করতে সাহায্য করে, বিশেষত এমন ক্ষেত্রে যেখানে server-side অনুরোধ ছাড়া ডেটা ম্যানেজ করা দরকার।

💖 💪 🙅 🚩
rsmacademybd
RSM Academy BD

Posted on September 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Web Storage API Explained with Examples
javascript Web Storage API Explained with Examples

September 20, 2024