4.2 লোকাল স্টোরেজ:

localStorage হল ওয়েব স্টোরেজ অবজেক্ট যা ব্রাউজারে কী/মান জোড়া সংরক্ষণ করার অনুমতি দেয়। তাদের সম্পর্কে যা মজার তা হল যে ডেটা একটি পেইজ রিফ্রেশ এবং এমনকি একটি সম্পূর্ণ ব্রাউজার রিস্টার্ট এর পরও টিকে থাকে। আমরা খুব শীঘ্রই এ বিষয়ে বিস্তারিত দেখতে পাব। আমাদের মনে প্রশ্ন আসতে পারে ডাটা রাখার জন্য তো ইতিমধ্যে কুকিজ আছে. তাহলে আবার এই localStorage বা sessionStorage এর দরকার কি?
  • ওয়েব স্টোরেজ অবজেক্টগুলো প্রতিটি অনুরোধের সাথে সার্ভারে পাঠানো হয় না। যে কারণে, আমরা আরো অনেক ডাটা সংরক্ষণ করতে পারি. বেশিরভাগ ব্রাউজার কমপক্ষে 2 মেগাবাইট ডেটা (বা তার বেশি) অনুমতি দেয় এবং সেটি কনফিগার করার জন্য সেটিংস থাকে।
  • সার্ভার HTTP হেডারের মাধ্যমে স্টোরেজ অবজেক্টগুলিকে ম্যানিপুলেট করতে পারে না। জাভাস্ক্রিপ্টেই সবকিছু করা হয়ে থাকে।
উভয় স্টোরেজ অবজেক্ট একই পদ্ধতি এবং বৈশিষ্ট্য প্রদান করে:
  • setItem(key, value) – স্টোর কী/ভ্যালু জোড়া।
  • getItem(key) – কী দ্বারা মান পাওয়া।
  • removeItem(key) – ভ্যালু দ্বারা কী রিমুভ করা।
  • clear() – সবকিছু মুছে ফেলা।
  • key(index) – একটি নিদিষ্ট অবস্থানের কী পাওয়া।
  • length – সঞ্চিত আইটেম সর্বমোট সংখ্যা।

localStorage ডেমো:

লোকাল স্টোরেজের ডাটাগুলো ব্রাউজারের বিভিন্ন ট্যাব আর উইন্ডোর মধ্যে শেয়ার হয়। এটি ব্রাউজার রিস্টার্ট এবং এমনকি OS রিবুট হওয়ার পরেও ডাটার মেয়াদ শেষ হয় না। উদাহরণস্বরূপ, নিচের কোডটি চালান।
localStorage.setItem(‘test’, 1);
ব্রাউজারটি বন্ধ/খুলুন বা একই পেইজটি একটি ভিন্ন উইন্ডোতে খুলুন দেখবেন লোকাল স্টোরেজের ডাটাগুলো ঠিকই অ্যাক্সেস করতে পারছেন। নিচের কোডটির মাধ্যমে আপনি চেক করে দেখতে পারেন।
alert( localStorage.getItem(‘test’) );
ডাটা শেয়ারের কারণে আপনি যদি লোকাল স্টোরেজে কোন পরিবর্তনও করেন তবে ওই পরিবর্তনও অন্য ট্যাব বা ব্রাউজারে চলে আসবে।

অবজেক্টের মতো অ্যাক্সেসঃ

আমরা চাইলে অবজেক্টের মতো করেও লোকাল স্টোরেজে ডাটা get/set করতে পারি। এমনকি ডাটা ডিলিটও করতে পারি। চলুন দেখি কিভাবে করব।
// For setting key
localStorage.test = 2;
// For getting key
alert( localStorage.test ); // 2
// For removing key
delete localStorage.test;

লুপের মাধ্যমে কী অ্যাক্সেসঃ

আমরা ইতিমধ্যে লোকাল স্টোরেজের ডাটা কি করে set,get,delete করা যায় তা দেখলাম। এখন মনে প্রশ্ন আসতে পারে, কি করে লোকাল স্টোরেজের সবগুলো কী/ভ্যালু জোড়া অ্যাক্সেস করা যায়? দুর্ভাগ্যবশত, লোকাল স্টোরেজের অবজেক্ট Iterable নয়। তবে একটি উপায় হল অ্যারের উপর তাদের লুপ করা।
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
আরেকটি উপায় হল for key in localStorageলুপ ব্যবহার করা, ঠিক যেমন আমরা নিয়মিত অবজেক্টের সাথে করে থাকি।
for(let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue;
}
alert(`${key}: ${localStorage.getItem(key)}`);
}

শুধুমাত্র স্ট্রিংঃ

মনে রাখবেন, লোকাল স্টোরেজের  কী এবং ভ্যালু উভয়ই স্ট্রিং হতে হবে। যদি অন্য কোন প্রকার হয়, যেমন একটি সংখ্যা, বা একটি বস্তু, এটি স্বয়ংক্রিয়ভাবে স্ট্রিং এ রূপান্তরিত হয়।
localStorage.user = {name: “Rajib”};
alert(localStorage.user);
যদিও আমরা JSON অবজেক্ট সংরক্ষণ করেও এটিকে ব্যবহার করতে পারি।
localStorage.user = JSON.stringify({name: “Rajib”});
let user = JSON.parse( localStorage.user );
alert( user.name );
এছাড়াও পুরো স্টোরেজ অবজেক্টকে স্ট্রিং করা সম্ভব, যেমন ডিবাগিং উদ্দেশ্যে।
alert( JSON.stringify(localStorage, null, 2) );
  • লোকাল স্টোরেজ এ আইটেম সেট করা, খুজে বের করা, ডিলিট করা এবং স্টোর থেকে সব আইটেম ক্লিয়ার করা।
    //setting a item on local storage
    localStorage.setItem(“lastname”, “Doe”);
    localStorage.setItem(“firstname”, “John”);
    localStorage.setItem(“age”, “34”);
    //getting a item from local storage
    const age = localStorage.getItem(‘age’);
    //removing a item
    localStorage.removeItem(“lastname”);
    //removing everything from Local Storage
    localStorage.clear();
     
  • একটি বাটনে কতবার ক্লিক হল গণনা করাঃ
Function showTotalClicks() {
if(typeof(Storage) !== “undefined”) {
if (localStorage.totalClick) {
localStorage.totalClick = Number(localStorage.totalClick)+1;
} else {
localStorage.totalClick = 1;
}
document.getElementById(“result”).innerHTML = “You have clicked the button “ + localStorage.totalClick + ” time(s).”;
}
}
  • localstorage এর সব আইটেম প্রিন্টঃ
for (var i = 0; i < localStorage.length; i++){
let val = localStorage.getItem(localStorage.key(i));
console.log(val);
}
এক্ষেত্রে ‘কি’ এর ভ্যালুগুলো এক্সেস করে, localStorage.getItem() ফাংশন দিয়ে প্রতিটি কি এর বিপরীতে রাখা নির্ধারিত ভ্যালু পাওয়া যায়।
  • কুকি ইউজ না করে কেন লোকাল স্টোরেজ ব্যবহার করব?
  • লোকাল স্টোরেজ এর মেমরি স্পেস কত?
  • লোকাল স্টোরেজ এ কোন ‘কি’ এর বিপরীতের ভ্যালু কিভাবে খুজে পাবে?
  • লোকাল স্টোরেজ এর সব গুলো কি-ভ্যালু প্রিন্ট কর।
  • লোকাল স্টোরেজ কোন কোন ক্ষেত্রে ব্যবহার করা যেতে পারে?
  • লোকাল স্টোরেজ এর ভ্যালু কি ইটারেবল?
  • লোকাল স্টোরেজ এর ভ্যালিডিটি কতক্ষণ থাকে?