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



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


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

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

কুকিজের ছাড়া স্টোরেজ সীমা বেশ বড় (অন্তত 5 এমবি) এবং এতে তথ্য সার্ভারে স্থানান্তর করা হয় না।
ওয়েব স্টোরেজ প্রতিটি ডোমেন এবং প্রোটোকল এর জন্য একটিই হয়। সমস্ত ওয়েব পেজ, এক উত্স বা source থেকে, একই তথ্য বা data সংরক্ষণ এবং অ্যাক্সেস করতে পারে।


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

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

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


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

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

window.localStorage - কোন মেয়াদ শেষের তারিখের সাথে তথ্য বা data সঞ্চয় করে
window.sessionStorage - কোন একটি সেশনের জন্য তথ্য সংরক্ষণ করে (ব্রাউজার ট্যাবটি বন্ধ হয়ে গেলে ডাটা হারিয়ে যায়)

ওয়েব স্টোরেজ ব্যবহার করার আগে, 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>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.