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

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

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

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

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

কুকির থেকে ভিন্ন, সংরক্ষণ সীমা অনেক বড় (কমপক্ষে ৫MB) এবং তথ্য সার্ভারে পাঠানো হয় না。

স্থানীয় সংরক্ষণ উৎপত্তিস্থান (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 প্রক্রিয়ার গঠন হল:

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 + " বার।";

আপনার নিজেই প্রয়াস করুন