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

Web Storage در HTML

درس قبل، canvas بیت‌مپ خالی بود که جاوااسکریپت با پیکسل رنگ می‌زد. این درس رسم را ترک می‌کند و Web Storage را معرفی می‌کند: به‌خاطر سپردن رشته‌های کلید/مقدار کوچک در مرورگر با localStorage و sessionStorage. HTML هنوز اسکریپت بار می‌کند؛ اسکریپت API ذخیره را صدا می‌زند. دامنه عملی است — ذخیره/خواندن مقدمه و عمر داده — نه کوکی، IndexedDB یا دیتابیس سرور.

چرا web storage در کورس HTML

مبتدی می‌خواهد تم، نام یا پیش‌نویس از رفرش زنده بماند. Web Storage اولین ابزار رایج برای این است. بعد از «JS پیکسل می‌کشد» در canvas، تقسیم اینجا فرق دارد: HTML پوستهٔ صفحه را دارد؛ JS به‌خاطر سپردن رشته برای همان origin را. فقط setItem، getItem و دانستن عمر local در برابر session کافی است.

پاسخ مستقیم

۱) از جاوااسکریپت localStorage.setItem("key", "value") برای ذخیرهٔ رشته. ۲) با localStorage.getItem("key") بخوانید (null اگر نباشد). ۳) localStorage وقتی مقدار باید تا پاک‌شدن بماند. ۴) sessionStorage وقتی فقط برای همان تب/نشست. ۵) تگ HTML جایگزین این APIها نیست — مثل رسم canvas اسکریپت‌محور است. ۶) فقط ترجیح سبک؛ اشیاء نیاز به JSON.stringify/JSON.parse دارند چون مقدارها رشته‌اند.

📊 localStorage vs sessionStorage

Topic	localStorage	sessionStorage
Typical lifetime	Until cleared by user/site/code	Until the tab/session ends
Survives browser restart	Usually yes (same origin)	No
Shared across tabs (same origin)	Yes (same storage)	No (per tab/session)
API shape	setItem / getItem / removeItem	Same method names
Beginner fit	Theme, language preference	One-tab wizard draft, temp flags
This course depth	Intro save/read only	Intro save/read only

دموی کوچک localStorage

کلیک دکمه می‌تواند salutation ذخیره کند و در <p> نشان دهد. بعد از رفرش، getItem هنوز مقدار را برای همان origin پیدا می‌کند — ایدهٔ «local».

localStorage setItem and getItem

html

<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

خواندن فراخوانی‌های localStorage

localStorage شیء مرورگر در دسترس اسکریپت صفحه است
setItem("greet", "hi") رشته را زیر کلید ذخیره می‌کند
getItem("greet") رشته را برمی‌گرداند (یا null)
نشان‌دادن در <p> ماندگاری بعد از رفرش را ثابت می‌کند بدون رسم (برخلاف canvas)
کلید و مقدار رشته‌اند — عدد/شیء نیاز به تبدیل دارد
پاک‌کردن: removeItem یا DevTools (اختیاری)

sessionStorage برای دادهٔ فقط‌تب

sessionStorage همان نام متدها را دارد ولی عمر کوتاه‌تر. برای پیش‌نویس یک‌تب که با بستن تب برود مفید است.

sessionStorage note

html

<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

خواندن ایدهٔ sessionStorage

همان الگوی setItem/getItem مثل localStorage
مقدار با رفرش در همان تب برمی‌گردد؛ معمولاً بعد از پایان تب/نشست می‌رود
توقع نداشته باشید تب دیگر همان sessionStorage را ببیند
هنوز فقط رشته؛ هنوز برای رمز عبور نه
local در برابر session را با نیاز عمر انتخاب کنید نه نام قشنگ‌تر
درس بعدی اختیاری: geolocation موقعیت را می‌پرسد — قابلیت JS دیگر

انتخاب چه چیزی ذخیره شود

ترجیح تم یا زبان UI: localStorage
پرچم مرحلهٔ ویزارد فقط این تب: sessionStorage
رمز/توکن محافظت‌شده: هیچ‌کدام — احراز هویت درست (فراتر از مقدمه)
فایل بزرگ یا دیتابیس آفلاین: نه مقدمهٔ Web Storage
حساب کاربری سمت سرور: بک‌اند/دیتابیس
رسم پیکسل روی سطح: آن canvas بود (درس قبل)، نه storage

تمرین — به‌خاطر سپردن یک ترجیح

دموی localStorage را بچسبانید؛ ذخیره کنید؛ hi را ببینید.
رفرش کنید؛ تأیید کنید greeting برمی‌گردد.
دموی sessionStorage را بچسبانید؛ note ذخیره کنید؛ در همان تب رفرش — note برمی‌گردد.
تب را ببندید و دوباره باز کنید؛ معمولاً note نشست رفته است.
setItem با عدد و typeof getItem — رشته برمی‌گردد.
جمله: canvas پیکسل می‌کشد؛ Web Storage رشتهٔ کلید/مقدار ذخیره می‌کند.
جلوتر: geolocation با اجازهٔ کاربر.

اشتباهات آسان

انتظار تگ HTML <storage> به‌جای API جاوااسکریپت
ذخیرهٔ رمز به‌عنوان گاوصندوق
فراموش اینکه مقدارها رشته‌اند (JSON برای اشیاء)
اشتباه گرفتن Web Storage با رسم canvas یا کوکی HTTP
فرض اینکه sessionStorage مثل localStorage تا ابد می‌ماند
فرض اشتراک با دستگاه یا پروفایل مرورگر دیگر
گرفتن این مقدمه به‌عنوان کل کورس دیتابیس آفلاین

خلاصه

Web Storage API جاوااسکریپت است: localStorage و sessionStorage
setItem/getItem کلید رشته را برای origin شما ذخیره/می‌خوانند
local تا پاک‌شدن؛ session تا تب/نشست
برای ترجیح سبک — نه اسرار
Canvas پیکسل بود؛ این درس رشته‌های به‌خاطر‌سپرده‌شده است
بعدی: geolocation در HTML با اجازه

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

آماده شروع

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

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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