آموزش HTML - ذخیره سازی وب

HTML Web Storage API یک رابط برنامه نویسی است که به توسعه دهندگان وب اجازه می دهد تا داده ها را در مرورگر وب کاربر ذخیره کنند. API دو مکانیسم برای ذخیره داده ها ارائه می دهد: localStorage و sessionStorage. هر دوی این مکانیسم‌ها به شما امکان می‌دهند جفت‌های کلید-مقدار را در مرورگر کاربر ذخیره کنید که می‌توانند بعداً بازیابی و استفاده شوند، حتی پس از بستن و باز کردن مجدد مرورگر توسط کاربر.

مکانیسم localStorage داده ها را به طور دائم در مرورگر کاربر ذخیره می کند تا زمانی که توسط کاربر یا برنامه وب پاک یا حذف شود. از طرف دیگر، مکانیسم sessionStorage، داده ها را فقط برای مدت زمان تعیین شده برای کاربر ذخیره می کند، به این معنی که وقتی کاربر مرورگر خود را می بندد، داده ها از بین می روند.

در اینجا یک مثال ساده از نحوه استفاده از HTML Web Storage API آورده شده است:

<!DOCTYPE html>
<html>
<head>
	<title>مثال ذخیره سازی وب</title>
	<script>
		function saveData() {
			var data = document.getElementById("data").value;
			localStorage.setItem("myData", data);
			alert("داده ها ذخیره شد!");
		}

		function loadData() {
			var data = localStorage.getItem("myData");
			if (data) {
				document.getElementById("data").value = data;
				alert("داده ها بارگیری شد!");
			} else {
				alert("داده ای یافت نشد.");
			}
		}

		function clearData() {
			localStorage.removeItem("myData");
			alert("داده ها پاک شد!");
		}
	</script>
</head>
<body>
	<label for="data">داده ها:</label>
	<input type="text" id="data">
	<br>
	<button onclick="saveData()">ذخیره</button>
	<button onclick="loadData()">بازیابی</button>
	<button onclick="clearData()">پاک کردن</button>
</body>
</html>

این مثال یک فیلد ورودی متن با شناسه "data" و سه دکمه با برچسب "save"، "load" و "clear" ایجاد می کند. تابع saveData() زمانی فراخوانی می شود که کاربر روی دکمه "ذخیره" کلیک می کند و داده ها را از فیلد ورودی بازیابی می کند و با استفاده از متد localStorage.setItem() ذخیره می کند.

تابع loadData () زمانی فراخوانی می شود که کاربر روی دکمه "بازیابی" کلیک می کند و داده ها را با استفاده از متد localStorage.getItem() از localStorage بازیابی می کند. اگر داده ای پیدا شود، در قسمت ورودی نمایش داده می شود. اگر داده ای پیدا نشد، یک هشدار نمایش داده می شود.

تابع ()clearData زمانی فراخوانی می شود که کاربر روی دکمه "پاک کردن" کلیک می کند و داده ها را با استفاده از متد localStorage.removeItem() از localStorage حذف می کند.

توجه داشته باشید که HTML Web Storage API محدود به ذخیره داده ها به صورت رشته است، بنابراین ممکن است لازم باشد از JSON یا سایر تکنیک های سریال سازی برای ذخیره ساختارهای داده پیچیده تر استفاده کنید. علاوه بر این، برخی از مرورگرهای قدیمی ممکن است از Web Storage API پشتیبانی نکنند، بنابراین باید از مکانیسم‌های ذخیره‌سازی یا جایگزین برای این مرورگرها استفاده کنید.

کشیدن و رها کردن - درس قبلی

درس بعدی - کارگزاران وب