জাভাস্ক্রিপ্ট স্থানীয় স্টোরেজ:একটি গাইড

ওয়েব অ্যাপ্লিকেশনগুলি খুব দ্রুত, খুব জটিল হতে পারে। একজন বিকাশকারী হিসাবে আমি আমার সময়ে একটি জিনিস শিখেছি যে আপনি যদি সুযোগ দেন তবে আপনি সাধারণ পুরানো জাভাস্ক্রিপ্টের সাথে অনেক কিছু করতে পারেন।

লোকাল স্টোরেজ এপিআই হল একটি শক্তিশালী বিল্ট-ইন ফাংশন যা সাধারণ অ্যাপ্লিকেশনগুলির জন্য ডাটাবেস ব্যবহার করার প্রয়োজনীয়তাকে সরিয়ে দেয় যার জন্য সার্ভারের প্রয়োজন নেই। আমরা স্থানীয়ভাবে ডেটার টুকরো সংরক্ষণ করতে এই API ব্যবহার করতে পারি যা আমাদের অ্যাপ্লিকেশন দ্বারা অ্যাক্সেস করা যেতে পারে।

এই নির্দেশিকায়, আমরা জাভাস্ক্রিপ্টে স্থানীয় স্টোরেজ পদ্ধতি কীভাবে ব্যবহার করব সে সম্পর্কে কথা বলতে যাচ্ছি। একটি ওয়েব পৃষ্ঠায় পরবর্তীতে একটি ফর্মের বিষয়বস্তু সংরক্ষণ করতে কীভাবে স্থানীয় স্টোরেজ ব্যবহার করতে হয় তার একটি উদাহরণ আমরা দেখব। চলুন শুরু করা যাক!

স্থানীয় স্টোরেজ কি?

localStorage হল ওয়েব স্টোরেজ API এর অংশ। এই API আপনাকে ব্যবহারকারীর ব্রাউজারে ডেটা সঞ্চয় করতে দেয় যা আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারে।

স্টোরেজ এপিআই দরকারী কারণ এর মানে হল যে আপনাকে কোনও ব্যবহারকারীর সেশন সম্পর্কে ডেটার প্রতিটি অংশ একটি ডাটাবেসে পাঠাতে হবে না। যদি কোনো ব্যবহারকারী আপনার সাইটে ডার্ক মোড সক্ষম করে, আপনি ক্লায়েন্টের দিকে তা ট্র্যাক করতে পারেন; যদি একজন ব্যবহারকারী পরবর্তী সময়ের জন্য একটি ফর্ম সংরক্ষণ করেন, তাহলে আপনাকে আপনার ডাটাবেসে অর্ধ-সম্পূর্ণ ফর্মটি সংরক্ষণ করতে হবে না।

ওয়েব স্টোরেজ দুই প্রকার। লোকাল স্টোরেজ হল এমন ডেটা যা ব্যবহারকারীর ব্রাউজার ট্যাব বন্ধ করার পরেও তার ব্রাউজার উইন্ডোতে থাকবে। কুকিজের বিপরীতে, লোকাল স্টোরেজ ডেটা হল মেয়াদ শেষ হওয়ার তারিখ ছাড়াই ডেটা। sessionStorage হল ডেটা যা একটি সেশনের মেয়াদ শেষ না হওয়া পর্যন্ত স্থায়ী হয়, যার মানে ব্রাউজার বন্ধ না হওয়া পর্যন্ত।

এই পোস্টে, আমরা স্থানীয় স্টোরেজ অবজেক্টের উপর ফোকাস করতে যাচ্ছি। যাইহোক, আপনি এটিকে সেশন স্টোরেজের জন্য প্রতিস্থাপন করতে পারেন কারণ তারা উভয়ই একই সিনট্যাক্স ব্যবহার করে।

লোকাল স্টোরেজ কিভাবে ব্যবহার করবেন

আমরা আমাদের উদাহরণে প্রবেশ করার আগে, আসুন স্থানীয় স্টোরেজ দ্বারা অফার করা পদ্ধতিগুলির মাধ্যমে চলুন।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

একটি স্থানীয় স্টোরেজ এন্ট্রি তৈরি করতে, আমরা setItem() নামে একটি পদ্ধতি ব্যবহার করতে পারি :

localStorage.setItem("name", "Linda Carlton");
console.log(localStorage);

আমাদের কোড ফিরে আসে:

{ name: "Linda Carlton", length: 1 }

localStorage আইটেম সংরক্ষণ করে কী:মান জোড়া। আমাদের উদাহরণে, আমরা "নাম" নামে একটি আইটেম তৈরি করেছি। এই আইটেমটির মান আছে "লিন্ডা কার্লটন"।

আমরা একটি console.log() ব্যবহার করেছি আমাদের মান যোগ করা হয়েছে তা নিশ্চিত করতে লোকাল স্টোরেজের বিষয়বস্তু প্রিন্ট করার বিবৃতি।

আপনি লোকাল স্টোরেজ এ সঞ্চিত একটি মান আপডেট করতে এই একই কোড ব্যবহার করতে পারেন।

স্থানীয় স্টোরেজ থেকে একটি নির্দিষ্ট মান পুনরুদ্ধার করতে, আপনি getItem() ব্যবহার করতে পারেন পদ্ধতি:

localStorage.getItem("name");

আমাদের কোড রিটার্ন করে:

Linda Carlton.

লোকাল স্টোরেজ থেকে ডেটা সরাতে আপনি দুটি পদ্ধতি ব্যবহার করতে পারেন:

• removeItem():স্থানীয় স্টোরেজ থেকে একটি আইটেম সরিয়ে দেয়
• ক্লিয়ার():localStorage()
-এর প্রতিটি আইটেম সরিয়ে দেয়

আমরা যদি স্থানীয় স্টোরেজ থেকে আমাদের "নাম" আইটেমটি সরাতে চাই, আমরা এই কোডটি ব্যবহার করতে পারি:

localStorage.removeItem(name);
console.log(localStorage);

আমাদের কোড রিটার্ন করে:

{ length: 0 }

লক্ষ্য করুন যে যদিও আমরা আমাদের স্থানীয় স্টোরেজ সাফ করেছি সেখানে এখনও একটি আইটেম সংরক্ষিত আছে:দৈর্ঘ্য। এটি আমাদের বলে যে কতগুলি আইটেম স্থানীয় স্টোরেজে সংরক্ষণ করা হয়েছে। এখন যেহেতু আমরা "নাম" এন্ট্রিটি সরিয়ে দিয়েছি, স্থানীয় স্টোরেজে কিছুই সংরক্ষিত নেই।

এটাও মনে রাখা গুরুত্বপূর্ণ যে লোকাল স্টোরেজ শুধুমাত্র স্ট্রিং সংরক্ষণ করতে পারে।

স্থানীয় স্টোরেজ ব্যবহার করে একটি ফর্ম সংরক্ষণ বৈশিষ্ট্য তৈরি করা

আমরা সকলেই কিছু ওয়েবসাইটে ছিলাম যেগুলি আমাদেরকে একটি দীর্ঘ ফর্ম পূরণ করতে বলে। যদি না কিছু সত্যিই গুরুত্বপূর্ণ হয়, আমি পরে সেই ফর্মে ফিরে যেতে সক্ষম হতে চাই। এই কারণেই অনেক সাইটের "ফর্ম সংরক্ষণ করুন" বৈশিষ্ট্য রয়েছে যা পরবর্তীতে আপনার ফর্মের বিবরণ ট্র্যাক করে।

যদিও এর মধ্যে কিছু সম্ভবত একটি ডাটাবেসে আপনার ডেটা ট্র্যাক করে, আপনি স্থানীয় স্টোরেজ পদ্ধতি ব্যবহার করে একটি হালকা সংস্করণ তৈরি করতে পারেন।

ফ্রন্ট এন্ড তৈরি করুন

আমরা একটি স্থানীয় চা ঘর, দ্য লিটল টি হাউসের জন্য একটি গ্রাহক প্রতিক্রিয়া ফর্ম তৈরি করতে যাচ্ছি। আমাদের প্রথম ধাপ হল আমাদের ওয়েব অ্যাপ্লিকেশনের জন্য ফ্রন্ট-এন্ড তৈরি করা। index.html নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডে পেস্ট করুন:

<!DOCTYPE html>
<html>
	<head>
    	<title>The Little Tea House Feedback</title>
    	<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
    	<div>
        	<h1>The Little Tea House: Customer Feedback</h1>
        	<p>How was your experience at The Little Tea House? We'd love to learn more!</p>
        	<form>
            	<label for="name">Name: </label>
            	<input id="name" type="text" /><br /><br />

            	<label for="email">Email: </label>
            	<input id="email" type="email" /><br /><br />

            	<label for="feedback">Message: </label><br /><br />
            	<textarea id="feedback"></textarea><br /><br />

            	<button id="saveButton">Save form</button>
            	<button id="retrieveButton">Retrieve form</button>
        	</form>
    	</div>
    	<script src="./form.js"></script>
	</body>
</html>

এই কোডটি আমাদের ফর্ম ক্ষেত্রগুলির সাথে একটি মৌলিক HTML পৃষ্ঠা তৈরি করে:

আমাদের সাইটে এখন প্রয়োজনীয় সবকিছু রয়েছে, কিন্তু আমরা এটিকে আরও নান্দনিকভাবে আনন্দদায়ক করতে কয়েকটি শৈলী যোগ করতে যাচ্ছি। styles.css নামে একটি ফাইল তৈরি করুন এবং এই কোডে পেস্ট করুন:

div {
    margin-left: 15vw;
    margin-right: 15vw;
    background-color: lightblue;
    padding: 20px;
}

এখন ওয়েবসাইটে ফিরে যান এবং পৃষ্ঠাটি রিফ্রেশ করুন:

আপনি দেখতে পাচ্ছেন, আমাদের ফর্ম এখন আমাদের ওয়েব পৃষ্ঠার কেন্দ্রে প্রদর্শিত হয় এবং একটি নীল পটভূমি রয়েছে। এটা দেখতে অসাধারণ! এখন আমরা এই ওয়েবপৃষ্ঠার জন্য জাভাস্ক্রিপ্ট লেখা শুরু করতে প্রস্তুত৷

একটি ফর্ম সংরক্ষণ বৈশিষ্ট্য তৈরি করুন

আমাদের পরবর্তী ধাপ হল আমাদের ফর্ম ক্ষেত্রগুলিতে সংরক্ষিত মানগুলি সংগ্রহ করা। উপরে থেকে, আমাদের ফর্ম ফিল্ডে আইডি আছে:

• নাম (আমাদের নামের ক্ষেত্র)
• ইমেল (আমাদের ইমেল ক্ষেত্র)
• প্রতিক্রিয়া (আমাদের বার্তা ক্ষেত্র)

আমরা আমাদের প্রতিটি ফর্ম ক্ষেত্র থেকে মান পুনরুদ্ধার করতে এই আইডিগুলি ব্যবহার করতে পারি। form.js নামে একটি ফাইল তৈরি করুন এবং এই কোডটি পেস্ট করুন:

var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback");

আমরা এগুলিকে "var" ভেরিয়েবল হিসাবে ঘোষণা করছি কারণ আমরা পরে তাদের মান পরিবর্তন করতে যাচ্ছি। আমরা আমাদের বোতামগুলিও পুনরুদ্ধার করতে যাচ্ছি যাতে আমরা টিউটোরিয়ালে পরে সেগুলিকে ক্লিকযোগ্য করে তুলতে পারি:

var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton");

আমাদের পরবর্তী ধাপ হল একটি ফাংশন তৈরি করা যা এই মানগুলিকে লোকাল স্টোরেজে সংরক্ষণ করে যখন আমাদের বোতাম টিপে। আমরা নিম্নলিখিত কোড ব্যবহার করে এটি করব:

function saveResponses() {
	localStorage.setItem("name", nameField.value);
	localStorage.setItem("email", emailField.value);
   	localStorage.setItem("feedback", feedbackField.value);
}

এই কোডটি আমাদের saveResponses() পর্যন্ত চলবে না ফাংশন আহ্বান করা হয়। সুতরাং, কিভাবে আমরা এই ঘটতে না? আমাদের এটিকে আমাদের বোতামের সাথে লিঙ্ক করতে হবে। যখন আমাদের বোতামটি ক্লিক করা হয় তখন এই কোডটি আমাদের ফাংশন চালু করতে দেয়:

saveButton.addEventListener("click", saveResponses);

এখন যখন আমরা আমাদের "সেভ ফর্ম" বোতাম টিপুন, আমাদের প্রতিক্রিয়াগুলি লোকাল স্টোরেজে সংরক্ষণ করা হবে।

কিন্তু আমরা যদি এটি পুনরুদ্ধার করতে না পারি তবে এই ডেটা সংরক্ষণ করে কোন লাভ নেই। আমরা একটি ফাংশন লিখতে যাচ্ছি যা এই ডেটা পুনরুদ্ধার করে যখন "ফর্ম পুনরুদ্ধার করুন" বোতামটি ক্লিক করা হয়:

function retrieveResponses() {
	nameField.value = localStorage.getItem("name");
   	emailField.value = localStorage.getItem("email");
    	feedbackField.value = localStorage.getItem("feedback");
}

retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });

দারুণ! এই কোডটি আমাদের প্রতিটি ফর্ম ফিল্ডের মান সেট করে যা লোকাল স্টোরেজে সংরক্ষণ করা হয় যদি একটি মান উপলব্ধ থাকে। এখন, আসুন আমাদের কোড চালান এবং দেখুন কি হয়:

আমাদের ফর্ম একই দেখায়. ফর্মটিতে কিছু মান সন্নিবেশ করার চেষ্টা করুন এবং "ফর্ম সংরক্ষণ করুন" বোতাম টিপুন। এটি ফর্মে আপনার প্রতিক্রিয়া সংরক্ষণ করবে।

এখন, আপনার পৃষ্ঠা রিফ্রেশ করুন এবং "ফর্ম পুনরুদ্ধার করুন" টিপুন। আপনি লক্ষ্য করবেন যে আপনার ফর্ম প্রতিক্রিয়া সংরক্ষিত হয়েছে! আমরা ট্যাব বন্ধ করলেও লোকাল স্টোরেজের তথ্য টিকে থাকবে। ব্রাউজার বন্ধ হয়ে গেলে এটি মুছে ফেলা হবে না। আমরা এটা করেছি!

এই ফর্ম প্রতিক্রিয়াগুলি সংরক্ষণ করা হবে যতক্ষণ না আপনি হয় আপনার ফর্মটি আবার সংরক্ষণ করবেন বা আপনার ক্যাশে সাফ করবেন।

দ্রষ্টব্য:সংবেদনশীল তথ্য সংরক্ষণ করতে আপনার এই কৌশলটি ব্যবহার করা উচিত নয়। লোকাল স্টোরেজের সমস্ত ডেটা প্লেইন টেক্সটে সংরক্ষিত থাকে, যার মানে এটি যে কোনও ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য।

উপসংহার

স্থানীয় স্টোরেজ পদ্ধতি আপনাকে জাভাস্ক্রিপ্টে স্থানীয়ভাবে ডেটা সংরক্ষণ করতে দেয়। একটি করণীয় তালিকা, ব্যবহারকারীর পছন্দগুলি সংরক্ষণ বা ব্যবহারকারীর ফর্ম ডেটা (সংবেদনশীল ডেটা সহ নয়) সংরক্ষণ করার মতো সাধারণ অ্যাপ্লিকেশনগুলির জন্য এটি একটি ডাটাবেস ব্যবহার করার চেয়ে অনেক ভাল৷ লোকাল স্টোরেজ সেট আপ করা সহজ, ব্যবহার করা সহজ এবং 100% ভ্যানিলা জাভাস্ক্রিপ্ট।

এখন আপনি একজন বিশেষজ্ঞ জাভাস্ক্রিপ্ট বিকাশকারীর মতো স্থানীয় স্টোরেজ পদ্ধতি ব্যবহার শুরু করতে প্রস্তুত!