HTML5 ক্লায়েন্ট সাইডে স্ট্রাকচারড ডেটা স্টোর করার জন্য দুটি মেকানিজম চালু করে: sessionStorage এবং localStorage। এটি HTTP কুকির محدودতা সমাধান করে:
- কুকি প্রতিটি HTTP রিকোয়েস্টের সাথে যায়, যা অ্যাপ্লিকেশনকে ধীর করে।
- কুকি প্রায় ৪ KB ডেটা ধারণ করতে পারে, যা পর্যাপ্ত নয়।
এই দুটি স্টোরেজ আলাদা পরিস্থিতির জন্য ডিজাইন করা হয়েছে।
Session Storage
Session Storage একক ট্রানজেকশনের জন্য ডিজাইন করা হয়েছে, তবে ব্যবহারকারী একই সাথে আলাদা উইন্ডোতে একাধিক ট্রানজেকশন চালাতে পারেন। ব্রাউজার ট্যাব বা উইন্ডো বন্ধ করলে ডেটা মুছে যায়।
উদাহরণ
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if( sessionStorage.hits ){ sessionStorage.hits = Number(sessionStorage.hits) +1; } else{ sessionStorage.hits = 1; } document.write("মোট হিট :" + sessionStorage.hits ); </script> <p>পেজ রিফ্রেশ করলে হিট সংখ্যা বাড়বে।</p> <p>উইন্ডো বন্ধ করে আবার খোললে ফলাফল চেক করুন।</p> </body> </html>
Local Storage
Local Storage একাধিক উইন্ডো এবং বর্তমান সেশনের ভিতরে 다 ডেটা সংরক্ষণ করে। বড় পরিমাণ ডেটা (মেগাবাইটস) স্টোর করা যায়, যেমন ব্যবহারকারীর লেখা ডকুমেন্ট বা মেইলবক্স, পারফরম্যান্সের জন্য। ব্রাউজার বন্ধ করেও ডেটা থাকে।
উদাহরণ
<!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; } else{ localStorage.hits = 1; } document.write("মোট হিট :" + localStorage.hits ); </script> <p>পেজ রিফ্রেশ করলে হিট সংখ্যা বাড়বে।</p> <p>উইন্ডো বন্ধ করে আবার খোললে ফলাফল চেক করুন।</p> </body> </html>
মূল পার্থক্য:
| শেষশন স্টোরেজ | লোকাল স্টোরেজ |
|---|---|
| ট্যাব/উইন্ডো বন্ধ হলে মুছে যায় | ব্রাউজার বন্ধ করেও থাকে |
| প্রতি ট্যাবে আলাদা | সকল ট্যাব/উইন্ডোতে শেয়ারড |
| ক্ষমতা: ~৫-১০ MB | ক্ষমতা: ~৫-১০ MB |
সিকিউরিটি টিপ: সংবেদনশীল ডেটা (পাসওয়ার্ড, টোকেন) локал স্টোরেজে সংরক্ষণ করবেন না, কারণ XSS আক্রমণের মাধ্যমে এটি চুরি হয়ে যেতে পারে।
