X

X

X

HTML5 এ Web Storage


HTML web storage; cookie এর চেয়ে বেশি ভালো।


HTML Web Storage বলতে কি বোঝায়?

web storage ব্যবহার করে , web application সমূহ ব্যবহারকারীর ব্রাউজারে ডাটা সংরক্ষণ করে রাখতে পারে।

HTML5 এর পূর্বে, application data গুলোকে কুকি দ্বারা সংরক্ষণ করতে হতো। এটি করা হতো প্রতিটি সার্ভার রিকোয়েস্টে। Web storage অধিক নিরাপদ এবং একই সাথে অনেক ডাটা সংরক্ষণ করা যায়।

এর স্টরেজ লিমিট কমপক্ষে ৫ মেগাবাইট এবং এই তথ্য কখনই সার্ভারে সরাসরি ট্রান্সফার হয় না। Web storage প্রতি origin (প্রতি domain ও protocol) অনুযায়ী ব্রাউজারে সংরক্ষিত হয়। একই ওয়েবসাইটের ডাটা একই ওয়েবসাইটের যেকোনো পেজ ব্যবহার করতে পারে।


Browser সাপোর্ট

নিচে Web Storage সাপোর্ট করে এমন ব্রাউজারের সর্বনিম্ন ভার্শনগুলো উল্লেখ্য করা হলো।

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Web Storage এর Object সমূহ

HTML web storage এ ব্যবহারকারীর ব্রাউজারে ডাটা রাখার জন্য দুই ধরণের অবজেক্ট ব্যবহার করা হয়।

  • window.localStorage – expiration date ছাড়া ডাটা সংরক্ষণ করে রাখে।
  • window.sessionStorage – প্রতি সেশনের জন্য ডাটা সংরক্ষণ করে রাখে। অর্থাৎ, ব্রাউজার বন্ধ হওয়ার সাথে সাথে ডাটা ডিলিট হয়ে যায়।

web storage ব্যবহার করার পূর্বে চেক করে নিবেন ব্রাউজার localStorage ও sessionStorage সাপোর্ট করে কি না:

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

localStorage Object

এটি কোনো expiration date ছাড়া ডাটা সংরক্ষণ করে রাখে। অর্থাৎ, ব্রাউজার বন্ধ হলেও ডাটা ব্রাউজারে সংরক্ষিত হয়ে থাকবে।

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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

  • localStorage এ name/value জোড়ায় ডাটা রাখুন। যেমন, name=”lastname” এবং value=”Smith”
  • “lastname” এর value উদ্ধার করুন এবং id=”result” বিশিষ্ট ইলামেন্টে প্রদর্শণ করুন।

উপরের উদাহরণটি এভাবেও লিখা যেতে পারে:

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

localStorage থেকে “lastname” item ডিলিট করার পদ্ধতি নিম্নরূপ:

localStorage.removeItem(“lastname”);

বি:দ্র: Name/value জোড়াগুলো সবসময় স্ট্রিং আকারে সংরক্ষিত হয়ে থাকে। অন্যকোনো কাজে একে ব্যবহার করার পূর্বে অবশ্যই তাকে জাভাস্ক্রিপ্ট ব্যবহার করে কাংখিত ফরম্যাটে কনভার্ট করতে হবে।

নিচের উদাহরণে দেখানো হয়েছে ব্যবহারকারী কতবার একটি বাটনে ক্লিক করেছে। এই উদাহরণে প্রথমে স্ট্রিংকে সংখ্যায় রূপান্তর করা হয়। তারপর ফাংশনটি সম্পাদন করা হয়।

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


sessionStorage Object

sessionStorage object এবং localStorage object মোটামুটি একই রকম, পার্থক্য শুধুমাত্র এক জায়গায়। লোকাল স্টোরেজ ইচ্ছেমত দীর্ঘ সময়ের জন সংরক্ষণ করা যাায়। আর সেশন স্টোরেজ এ শুধুমাত্র একটি সেশনের জন্য ডাটা সংরক্ষণ করা যায়।

একটি সেশনে ব্যবহারকারী কতবার একটি বাটনে ক্লিক করেছেন তা নিচের উদাহরণে সেশন স্টোরেজ ব্যবহার করে দেখানো হলো।

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।