Local Storage Editor বর্তমান সাইটের localStorage এবং sessionStorage এন্ট্রিগুলো ম্যানেজ করার জন্য একটি পরিচ্ছন্ন টেবিল ইন্টারফেস প্রদান করে। সব কি-ভ্যালু (key-value) পেয়ার ব্রাউজ করুন, সরাসরি এডিট করুন, নতুন এন্ট্রি যুক্ত করুন এবং অপ্রয়োজনীয়গুলো মুছে ফেলুন। সহজে পড়ার জন্য এখানে JSON ভ্যালুগুলো অটোমেটিকভাবে শনাক্ত এবং ফরম্যাট করা হয়। উভয় ধরনের স্টোরেজ ম্যানেজ করতে localStorage এবং sessionStorage ট্যাবে সুইচ করুন।
আধুনিক ওয়েব অ্যাপ্লিকেশনগুলো তাদের স্টেট (state) হিসেবে প্রচুর পরিমাণ ডেটা localStorage এবং sessionStorage-এ জমিয়ে রাখে — যার মধ্যে থাকে ইউজারের পছন্দ (preferences), অথেন্টিকেশন টোকেন, ফিচার ফ্ল্যাগ, শপিং কার্টের কন্টেন্ট, ড্রাফ্ট ফরম, ক্যাশ করা API রেসপন্স এবং UI স্টেট। ক্রোম ডেভটুলসে (Chrome DevTools) এই ভ্যালুগুলো ডিবাগ করতে অ্যাপ্লিকেশন ট্যাবে গিয়ে স্টোরেজ সেকশন খুঁজে বের করতে হয়, যা বেশ কষ্টসাধ্য এবং সেখানে এডিটিং অপশনও সীমিত। 'Local Storage Editor' এই সবকিছুকে একটি সুনির্দিষ্ট প্যানেলে নিয়ে আসে যেখানে ট্যাবড স্টোরেজ সুইচিং, ইনলাইন এডিটিং, JSON অটো-ফরম্যাটিং এবং একসাথে অনেক কাজ (bulk operations) করার সুবিধা রয়েছে। টেবিলে প্রতিটি কি-ভ্যালু পেয়ার সাজানো থাকে। JSON ভ্যালুগুলো (যা সাধারণত JSON.stringify ব্যবহার করে তৈরি করা হয়) অটোমেটিক শনাক্ত করা হয় এবং সঠিক ফরম্যাট ও সিনট্যাক্স হাইলাইটিংয়ের মাধ্যমে দেখানো হয়। যেকোনো ভ্যালুর ওপর ক্লিক করে সেটি সরাসরি এডিট করুন — পরিবর্তনগুলো সাথে সাথেই স্টোরেজ API-তে সেভ হয়ে যাবে। নতুন এন্ট্রি যুক্ত করুন অথবা প্রয়োজন অনুযায়ী সুনির্দিষ্ট বা একসাথে সব এন্ট্রি মুছে ফেলুন।
প্যানেলের উপরের ট্যাব বাটনগুলো ব্যবহার করে খুব সহজেই localStorage এবং sessionStorage-এর মধ্যে সুইচ করুন। প্রতিটি ট্যাবে মোট এন্ট্রি সংখ্যা প্রদর্শিত হয় (যেমন: "localStorage (12)" / "sessionStorage (3)")। এক ইন্টারফেস থেকেই উভয় ধরনের স্টোরেজ নিয়ন্ত্রণ করুন।
সরাসরি এডিট করতে যেকোনো ভ্যালু সেলে ক্লিক করুন। সাধারণ ভ্যালুর ক্ষেত্রে জাস্ট নতুন স্ট্রিং টাইপ করুন। আর JSON ভ্যালুর ক্ষেত্রে সিনট্যাক্স হাইলাইটিং সহ একটি পূর্ণাঙ্গ এডিটর ওপেন হবে। পরিবর্তনগুলো সাথে সাথেই স্টোরেজ API-তে সেভ হয়ে যাবে।
JSON ভ্যালু (যা সাধারণত অবজেক্ট বা অ্যারে)-গুলোকে অটোমেটিকভাবে শনাক্ত করে ইনডেন্টেশন এবং সিনট্যাক্স হাইলাইটিং সহকারে প্রদর্শন করা হয়। সরাসরি ফরম্যাট করা JSON এডিট করুন — সেভ করার সময় এটি আবার অটো-সিরিয়ালাইজ হয়ে যাবে।
নতুন কোনো কি-ভ্যালু পেয়ার তৈরি করতে "Add Entry" বাটনে ক্লিক করুন। এরপর কি (key)-এর নাম এবং ভ্যালু (স্ট্রিং বা JSON) দিন। এন্ট্রিটি সাথে সাথেই বর্তমান ডোমেইনের স্টোরেজে যুক্ত হয়ে যাবে।
সুনির্দিষ্ট কোনো এন্ট্রি মুছতে পঙক্তি বা রো-এর ডিলিট বাটন ব্যবহার করুন অথবা বর্তমান স্টোরেজ টাইপের সব এন্ট্রি মুছতে "Clear All" ব্যবহার করুন। টেস্টিংয়ের সময় অ্যাপ্লিকেশন স্টেট রিসেট করার জন্য এটি খুবই কার্যকর।
এডিটর-এ করা যেকোনো পরিবর্তন সাথে সাথেই অ্যাপ্লিকেশনে কার্যকর হয়। যদি আপনার অ্যাপটি ইউজার ইন্টারঅ্যাকশনের সময় স্টোরেজ থেকে কোনো ভ্যালু রিড করে, তবে এখান থেকে সেই ভ্যালু পরিবর্তন করার সাথে সাথেই অ্যাপ তা বুঝতে পারবে — অধিকাংশ ক্ষেত্রে পেজ রিলোড করারও প্রয়োজন হবে না।
আপনার অ্যাপ্লিকেশন localStorage-এ কী কী ভ্যালু সেভ করেছে তা ভালো করে দেখুন। অথেন্টিকেশন টোকেনটি কি আছে? ইউজারের পছন্দের অবজেক্টটি কি সঠিকভাবে সাজানো? পুরানো কোনো ক্যাশ ভ্যালুর কারণে কি অপ্রত্যাশিত কোনো সমস্যা হচ্ছে?
অ্যাপ্লিকেশনকে তার প্রাথমিক অবস্থায় ফিরিয়ে নিতে সব localStorage ডেটা মুছে ফেলুন — এটি প্রথমবার অ্যাপ চালানোর অভিজ্ঞতা বা ডিফল্ট কনফিগারেশন টেস্ট করার জন্য খুবই উপযোগী এবং এতে অন্য কোনো সাইটের ব্রাউজার ডেটা ডিলিট হয় না।
অনেক অ্যাপ্লিকেশন ফিচার ফ্ল্যাগ ভ্যালুগুলো localStorage-এ সেভ করে। সরাসরি এখান থেকেই কোনো ফিচার চালু বা বন্ধ করতে ভ্যালুগুলো এডিট করুন, কোনো ম্যানেজমেন্ট UI বা নতুন করে ডিপ্লয় করার ঝামেলার দরকার নেই।
ইউজারের পছন্দ, থিম সেটিংস, ভাষা নির্বাচন বা অনবোর্ড কমপ্লিশন ফ্ল্যাগগুলো এডিট করে বিভিন্ন ইউজার স্টেট সিমুলেট করুন এবং আপনার অ্যাপ্লিকেশন তা কীভাবে হ্যান্ডেল করে তা পরীক্ষা করুন।
আপনার ডোমেইনের localStorage-এ থার্ড-পার্টি স্ক্রিপ্টগুলো (অ্যানালিটিক্স, চ্যাট, অ্যাডভার্টাইজিং) কী কী ডেটা সেভ করছে তা দেখুন। ডেটাগুলো প্রাইভেসি বিধি মেনে চলছে কি না বা স্টোরেজের অস্বাভাবিক ব্যবহার হচ্ছে কি না তা পরীক্ষা করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Local Storage Editor আইকনে ক্লিক করুন। একটি প্যানেল ওপেন হবে এবং বর্তমান ডোমেইনের সব localStorage এন্ট্রি দেখাবে।
কি-ভ্যালু টেবিলটি স্ক্রল করে দেখুন। JSON ভ্যালুগুলো এখানে অটোমেটিকভাবে ফরম্যাট করা থাকে। প্রয়োজন হলে ট্যাব সুইচ করে sessionStorage দেখে নিন।
সরাসরি এডিট করতে যেকোনো ভ্যালুতে ক্লিক করুন। JSON ভ্যালুর জন্য একটি সুন্দর ফরম্যাটেড এডিটর আসবে। পরিবর্তনগুলো সাথে সাথেই স্টোরেজ API-তে কার্যকর হবে।
নতুন কোনো কি-ভ্যালু পেয়ার তৈরি করতে "Add Entry" ব্যবহার করুন। কোনো এন্ট্রি মুছতে নির্দিষ্ট রো-এর ডিলিট আইকনে ক্লিক করুন। সব মুছতে "Clear All" চাপুন।
স্টোরেজ ভ্যালু পরিবর্তনের পর, পরিবর্তিত ডেটার পরিপ্রেক্ষিতে আপনার অ্যাপ্লিকেশনটি কীভাবে আচরণ করে তা দেখতে পেজের সাথে ইন্টারঅ্যাক্ট করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
