در حال بارگذاری...

ذخیره‌سازی وب HTML

ذخیره‌سازی وب (Web Storage) یکی از قابلیت‌های مهم HTML5 است که به توسعه‌دهندگان اجازه می‌دهد داده‌ها را به‌صورت محلی (local) در مرورگر کاربر ذخیره کنند، بدون نیاز به ارسال مداوم به سرور. این قابلیت شامل دو نوع حافظه است: localStorage (ذخیره‌سازی دائمی) و sessionStorage (ذخیره‌سازی موقتی).
مانند ساخت یک خانه که هر اتاقش می‌تواند یک بخش مجزا باشد، ذخیره‌سازی وب مانند داشتن یک کشو شخصی در هر اتاق است که اطلاعات لازم را برای استفاده بعدی نگه می‌دارد. در فروشگاه آنلاین، اطلاعات سبد خرید؛ در وب‌سایت خبری، تنظیمات زبان؛ در وبلاگ شخصی، ترجیحات نویسنده؛ و در پورتال دولتی، فرم‌های نیمه‌کامل را می‌توان ذخیره کرد.
در این آموزش، یاد خواهید گرفت:

ذخیره‌سازی وب چیست و چرا اهمیت دارد
چه زمانی و چگونه از آن استفاده کنید
نحوه‌ی پیاده‌سازی آن با مثال‌های واقعی و عملی

مثال پایه

html

HTML Code

<!DOCTYPE html>
<html>
<body>

<button onclick="localStorage.setItem('user', 'Ali')">ذخیره نام</button>
<button onclick="alert(localStorage.getItem('user'))">نمایش نام</button>

</body>
</html>

در این مثال ساده، از localStorage برای ذخیره و بازیابی داده استفاده شده است.

localStorage.setItem('user', 'Ali') داده‌ای با کلید user و مقدار Ali در حافظه مرورگر ذخیره می‌کند. این داده حتی پس از بستن مرورگر نیز باقی می‌ماند.
localStorage.getItem('user') مقدار ذخیره‌شده را بازیابی کرده و با استفاده از alert() نمایش می‌دهد.
این قابلیت برای ذخیره داده‌هایی مناسب است که نیازی به امنیت بالا ندارند اما باید در مراجعات بعدی کاربر حفظ شوند. یکی از سوالات متداول این است که آیا می‌توان اشیاء (Object) را مستقیماً ذخیره کرد؟ پاسخ منفی است؛ باید از JSON.stringify() برای تبدیل شیء به رشته استفاده کرده و سپس از JSON.parse() برای بازیابی آن استفاده شود.
ذخیره‌سازی وب هیچ نیازی به ارتباط با سرور ندارد و باعث کاهش بار شبکه و افزایش سرعت تجربه کاربری می‌شود.

مثال کاربردی

html

HTML Code

<!DOCTYPE html>
<html>
<body>

<label>انتخاب زبان:
<select id="lang">
<option value="fa">فارسی</option>
<option value="en">English</option>
</select>
</label>

<script>
const lang = localStorage.getItem('lang');
if (lang) document.getElementById('lang').value = lang;

document.getElementById('lang').addEventListener('change', e => {
localStorage.setItem('lang', e.target.value);
location.reload();
});
</script>

</body>
</html>

Best practices:

استفاده از کلیدهای معنادار مانند user_lang برای جلوگیری از تداخل
استفاده از JSON.stringify برای ذخیره اشیاء
پاک‌سازی داده‌های قدیمی با استفاده از removeItem یا clear
استفاده از ساختار معنایی (Semantic HTML) مانند label برای بهبود دسترس‌پذیری
Common mistakes:
ذخیره داده‌های حساس مانند رمز عبور
استفاده نادرست از sessionStorage در جایی که باید داده پایدار بماند
عدم بررسی وجود داده قبل از getItem
تلاش برای ذخیره اشیاء بدون تبدیل به رشته
Debugging:
استفاده از DevTools > Application > LocalStorage
بررسی خطاهای احتمالی با try/catch
محدودیت حجم (\~۵ مگابایت) را در نظر بگیرید

📊 مرجع سریع

Property/Method	Description	Example
localStorage.setItem()	ذخیره مقدار با کلید مشخص	localStorage.setItem('name', 'Sara')
localStorage.getItem()	دریافت مقدار با کلید	localStorage.getItem('name')
localStorage.removeItem()	حذف داده خاص	localStorage.removeItem('name')
localStorage.clear()	پاک‌سازی کل حافظه	localStorage.clear()
sessionStorage.setItem()	ذخیره داده موقتی	sessionStorage.setItem('tmp', '123')
sessionStorage.getItem()	دریافت داده موقتی	sessionStorage.getItem('tmp')

در این آموزش با مفهوم ذخیره‌سازی وب HTML آشنا شدیم. فهمیدیم که این قابلیت چگونه به ما اجازه می‌دهد داده‌هایی مانند تنظیمات کاربر یا سبد خرید را به‌صورت محلی و بدون نیاز به سرور ذخیره کنیم.
این تکنولوژی مکمل خوبی برای CSS و JavaScript است؛ مثلاً با انتخاب زبان یا قالب ظاهری کاربر، می‌توان این اطلاعات را ذخیره کرده و در مراجعات بعدی آن را اعمال کرد. این روش عملکرد و تجربه کاربری را بهبود می‌بخشد.
مباحث پیشنهادی برای مطالعه‌ی بعدی:

استفاده از JSON برای ذخیره ساختارهای پیچیده
تفاوت cookie و Web Storage
استفاده از IndexedDB برای ذخیره‌سازی گسترده‌تر
تمرین: یک بلاگ بسازید که نام کاربر را ذخیره کرده و در مراجعه بعدی خوش‌آمدگویی اختصاصی نمایش دهد.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود