এইচটিএমএল৫ ওয়েব স্টোরেজ - HTML5 Web Storage


এইচটিএমএল ওয়েব স্টোরেজ হল কুকিজ এর তুলনায় অনেকাংসে ভাল একটি পদ্ধতি।


এইচটিএমএল ৫.০ এর ওয়েব স্টোরেজ কি?

ওয়েব স্টোরেজ এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন গুলো ব্যবহারকারী বা user এর ব্রাউজারের মধ্যে স্থানীয়ভাবে তথ্য সঞ্চয় করতে পারে।
আগে, সার্ভারে প্রতিটি অনুরোধ বা request সহ অ্যাপ্লিকেশনের তথ্য বা data গুলো কুকিতে সংরক্ষন করা তত। কিন্তু কুকি ব্যবহার করে বেসি পরিমাণ তথ্য বা data সংরক্ষন করা যায় না। সে তুলনায়, ওয়েব স্টোরেজ একটি নিরাপদ পদ্ধতি। ওয়েব স্টোরেজ পদ্ধতিতে ওয়েবসাইটের কার্যক্ষমতাকে কোন ধরনের প্রভাব না ফেলেই অনেক বড় পরিমাণে তথ্য স্থানীয় বা local ভাবে সংরক্ষণ করা যায়।

অধিকাংশ ব্রাউজারই প্রতিটি ডোমেইন এর জন্য 50 টির বেসি কুকি সমর্থন করে না, এবং সব মিলিয়ে এদের আকার হয় 4093 Byte.


ব্রাউজার সমর্থন বা support

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ওয়েব স্টোরেজ সমর্থন বা support করে।

API
ওয়েব স্টোরেজ 4.0 8.0 3.5 4.0 11.5


ওয়েব স্টোরেজ অবজেক্ট

এইচটিএমএল ৫.০ ওয়েব স্টোরেজ ক্লায়েন্ট সাইডে তথ্য বা data সংরক্ষণের জন্য দুটি অবজেক্ট প্রদান করে।

ওয়েব স্টোরেজ ব্যবহার করার আগে, localStorage এবং sessionStorage এর জন্য ব্রাউজার সমর্থন বা support পরীক্ষা করে নিতে হয়। নিচে এর জন্য কোড দেখুন।

উদাহরণ


if (typeof(Storage) !== "undefined") { 
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}


কোড এডিটর



localStorage অবজেক্ট

localStorage অবজেক্ট কোনও মেয়াদ শেষের তারিখের সাথে তথ্য বা data সংরক্ষণ করে না। ব্রাউজার বন্ধ হয়ে গেলেও এই তথ্য বা data মুছে ফেলা হয় না। এই তথ্য বা data পরের দিন, পরের সপ্তাহ বা বছরেও পাওয়া যায়।

উদাহরণ

<body> 

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>


কোড এডিটর


উদাহরণের ব্যাখ্যা

Name ="lastname" এবং Value="Rudra" নামে একটি localStorage স্টোরেজ তৈরি করতে হয়েছে। "lastname" এর মান পুনরদ্ধার করে, id="result" নামে এলিমেন্টে রাখা হয়েছে।

উপরের উদাহরণটিকে আবার নিচের মত করেও লেখা যায়।

উদাহরণ

// Store 
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

নিচে "Lastname" localStorage আইটেমটি মুছে ফেলার জন্য সিনট্যাক্স দেখুন।

উদাহরণ

localStorage.removeItem("lastname");


কোড এডিটর


নোট - Name/value এর জোড়াটি সবসময়ই স্ট্রিং হিসেবে সংরক্ষিত হয়। অন্য কথাও বাবহারের সময় প্রয়োজনীয় ফরম্যাটে রুপান্তর বা convert করে নিতে হয়।

নিচের উদাহরণটি দেখুন, এখানে বাবহারকারী বা user কোন নির্দিষ্ট একটি বাটনে কতবার ক্লিক করেছে তা গননা করা হয়েছে। এই কোডে মান বা value একটি স্ট্রিং যেটা একটি সংখ্যা বা number এ পরিনত হয়।

উদাহরণ

<head> 
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>বাটনে ক্লিক করে দেখুন যে সংখ্যাটি বাড়ছে।</p>
<p>ব্রাউজার ট্যাব বা উইন্ডো বন্ধ করে দেখুন এবং তারপর আবার open করে ক্লিক করে দেখুন যে এটি রিসেট হয় নি, ব্রাউজার আগের সংখ্যা থেকেই গননা করতে সুরু করেছে।</p>
</body>


কোড এডিটর



sessionStorage অবজেক্ট

SessionStorage অবজেক্ট local বা স্থানীয় অবজেক্টের মতই, সুধু পার্থক্য হল এটি কেবলমাত্র একটি সেশনের জন্য তথ্য বা data সংরক্ষণ করে। যখন ব্যবহারকারী নির্দিষ্ট ব্রাউজার ট্যাব বন্ধ করে তখন এই তথ্য মুছে যায়।

নিচের উদাহরণটি দেখুন, এখানে বর্তমান সেশনটিতে ব্যবহারকারীর বোতামটি ক্লিক করার সংখ্যাটিই কেবল গণনা করে।

উদাহরণ

<head> 
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>বাটনে ক্লিক করে দেখুন যে সংখ্যাটি বাড়ছে।</p>
<p> ব্রাউজার ট্যাব বা উইন্ডো বন্ধ করে দেখুন এবং তারপর আবার open করে ক্লিক করে দেখুন যে এটি রিসেট হয়ে গিয়েছে, অর্থাৎ ব্রাউজার নতুন করে গননা করতে সুরু করেছে।</p>
</body>


কোড এডিটর


এইচটিএমএল এর ওয়েব স্টোরেজ সম্পর্কে জানতে W3C এর Web Storage (Second Edition) ওয়েব পেজটি ব্রাউজ করুন।