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 storagelocalStorage.setItem(“lastname”, “Doe”);localStorage.setItem(“firstname”, “John”);localStorage.setItem(“age”, “34”);//getting a item from local storageconst age = localStorage.getItem(‘age’);//removing a itemlocalStorage.removeItem(“lastname”);//removing everything from Local StoragelocalStorage.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);
}
- কুকি ইউজ না করে কেন লোকাল স্টোরেজ ব্যবহার করব?
- লোকাল স্টোরেজ এর মেমরি স্পেস কত?
- লোকাল স্টোরেজ এ কোন ‘কি’ এর বিপরীতের ভ্যালু কিভাবে খুজে পাবে?
- লোকাল স্টোরেজ এর সব গুলো কি-ভ্যালু প্রিন্ট কর।
- লোকাল স্টোরেজ কোন কোন ক্ষেত্রে ব্যবহার করা যেতে পারে?
- লোকাল স্টোরেজ এর ভ্যালু কি ইটারেবল?
- লোকাল স্টোরেজ এর ভ্যালিডিটি কতক্ষণ থাকে?
