এইচটিএমএল স্থানীয় সংরক্ষণ

এইচটিএমএল স্থানীয় সংরক্ষণ: কুকিসদের উপর উপরে

এইচটিএমএল স্থানীয় সংরক্ষণ কী?

স্থানীয় সংরক্ষণ (Local Storage) দ্বারা, web অ্যাপ্লিকেশন ব্যবহারকারীর ব্রাউজারের মধ্যে ডাটা স্থানীয়ভাবে সংরক্ষণ করতে পারে。

HTML5 পূর্বে, অ্যাপ্লিকেশন ডাটা শুধুমাত্র কুকিতে সংরক্ষণ করা যেত, সমস্ত সার্ভার অনুরোধ থেকে। স্থানীয় সংরক্ষণ আরও নিরাপদ এবং ওয়েবসাইটের কার্যকারিতা নিষ্প্রভাবিত করতে বিশাল ডাটা স্থানীয়ভাবে সংরক্ষণ করা যেত

কুকির থেকে ভিন্ন, সংরক্ষণ সীমানা অনেক বড় (কমপক্ষে ৫মেগাবাইট) এবং তথ্য সার্ভারে প্রেরিত হয় না।

স্থানীয় সংরক্ষণ প্রধান স্থান (origin) (ডোমেইন এবং প্রোটোকল) দ্বারা পরিচালিত হয়। সকল পৃষ্ঠা, প্রধান স্থান থেকে, একই ডাটা সংরক্ষণ এবং প্রবেশ করতে পারে।

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

টেবিলের অ্যারে স্থানীয় স্টোরেজ-এর পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণ নির্দেশ করে

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML স্থানীয় স্টোরেজ অবজেক্ট

HTML স্থানীয় স্টোরেজ দুটি অবজেক্ট প্রদান করে, যা ক্লায়েন্ট এক্সেসের জন্য:

  • window.localStorage - শেষ তারিখ নেই থাকা ডাটা স্টোরেজ
  • window.sessionStorage - একটি সেশনের জন্য ডাটা স্টোরেজ (ব্রাউজার ট্যাব বন্ধ হলেও ডাটা মুছে যায়)

স্থানীয় স্টোরেজ ব্যবহার করার সময়, localStorage এবং sessionStorage-র ব্রাউজার সমর্থন পরীক্ষা করুন:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage-র জন্য কোড
} else {
    // মান্না! Web Storage-এর সমর্থন নেই ..
}

localStorage অবজেক্ট

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

উদাহরণ

// সংরক্ষণ
localStorage.setItem("lastname", "Gates");
// ফিরিয়ে নিয়ে
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

আপনার হাতে চেষ্টা করুন

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

  • localStorage নাম/মান প্যার সৃষ্টি করুন, যেখানে: name="lastname"，value="Gates"
  • স্টোরেজ "lastname" এর মান ফিরিয়ে নিয়ে, এবং তা id="result" এর উপাদানে মিশ্রিত করুন

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

// সংরক্ষণ
localStorage.lastname = "Gates";
// ফিরিয়ে নিয়ে
document.getElementById("result").innerHTML = localStorage.lastname;

স্টোরেজ "lastname" এর প্রক্রিয়া নিম্নরূপ:

localStorage.removeItem("lastname");

মন্তব্য: নাম/মান প্যার হয়েছে স্ট্রিং হিসাবে সংরক্ষিত থাকে। যদি কোনও না তবে তাদের অন্য ফরম্যাটে রূপান্তরিত করার জন্য মনে রাখুন!

এই উদাহরণটি ব্যবহারকারীর বুটন ক্লিক করার সংখ্যা গণনা করে। কোডে, মান স্ট্রিং মান হিসাবে রূপান্তরিত হয় এবং গণনা ক্রমাগত বৃদ্ধি করা হয়:

উদাহরণ

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "আপনি এই বাটনটি ক্লিক করেছেন " +
localStorage.clickcount + " বার";

আপনার হাতে চেষ্টা করুন

sessionStorage অবজেক্ট

sessionStorage অবজেক্ট localStorage অবজেক্টের সমান, কিন্তু একমাত্র একটি session-এ ডাটা সংরক্ষণ করে।যদি ব্যবহারকারী ব্রাউজার ট্যাব বন্ধ করেন, তবে ডাটা মুছে যাবে。

নিম্নলিখিত উদাহরণটিতে, বর্তমান session-এ ব্যবহারকারীর বাটন ক্লিককরণকে গণনা করা হয়:

উদাহরণ

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "এই session-এ, আপনি এই বাটনটি ক্লিক করেছেন " +
sessionStorage.clickcount + " বার";

আপনার হাতে চেষ্টা করুন