লোকাল স্টোরেজ এবং সেশন স্টোরেজ

localStorageএবং sessionStorage হল ওয়েব স্টোরেজ অবজেক্ট যা ব্রাউজারে কী/মান জোড়া সংরক্ষণ করার অনুমতি দেয়। তাদের সম্পর্কে যা মজার তা হল যে ডেটা একটি পেইজ রিফ্রেশ (এর জন্য sessionStorage) এবং এমনকি একটি সম্পূর্ণ ব্রাউজার রিস্টার্ট (এর জন্য 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) );

সেশন স্টোরেজঃ

sessionStorage অবজেক্ট localStorage অবজেক্ট থেকে অনেক কম ব্যবহৃত হয়। সেশন স্টোরেজর প্রপার্টি আর মেথডগুলো একই হলেও অনেক সীমিত।

• sessionStorageশুধুমাত্র ব্রাউজার Current ট্যাবের মধ্যেই বিদ্যমান। একই পেইজের আরেকটি ট্যাবে আলাদা স্টোরেজ থাকবে।
• ডেটা পেইজ রিফ্রেশ হওয়ার পরও বেঁচে থাকে, কিন্তু ট্যাব বন্ধ বা নতুন ট্যাব খুললে আর থাকে না।

চলুন টেস্ট করে দেখা যাক। নিচের কোডটি রান করুন।

sessionStorage.setItem('test', 1);

এবার পেইজটি রিফ্রেশ করুন। এরপর কোডটি রান করুন।

alert( sessionStorage.getItem('test') );

দেখবেন ঠিক থাক মত ডাটা পাবেন। এবার একই পেইজটি একটি অন্য ট্যাবে খুলুন দেখবেন null পাবেন তারমানে কোন ডাটা নেই। অর্থাৎ sessionStorage ব্রাউজার ট্যাবের মধ্যে আবদ্ধ।

এই ছিল আজকের আলোচনা। পরবর্তীতে অন্য কোন বিষয় নিয়ে আবার কথা হবে।

হ্যাপি কোডিং।