ذخیره‌سازی وب
ذخیرهٔ وب یک یادداشت کوچک را برای همین سایت در مرورگر نگه می‌دارد. localStorage بعد از بستن مرورگر هم هست. این صفحه { guest: "lida", drink: "tea" } را ذخیره می‌کند و خطش saved / lida / tea است.
این صفحهٔ الگو نیست
آن صفحه روی true / Order: mint تمام شد. آنجا یک رشته جست‌وجو شد و چیزی پرتاب نشد. اینجا هم اگر کلید نباشد خطا پرتاب نمی‌شود: getItem مقدار null برمی‌گرداند. کوکی مال صفحهٔ بعد است. این ذخیره با هر درخواستی که مرورگر می‌فرستد همراه نمی‌شود.
مقدار همیشه رشته است
setItem زیر یک کلید می‌نویسد. getItem همان را برمی‌گرداند. اگر عدد بدهی، به‌صورت متن ذخیره می‌شود.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
لاگ‌ها tea و بعد null هستند. size هیچ‌وقت نوشته نشده، پس مقداری نیست و خطایی هم نیست. setItem("count", 2) نویسه‌های 2 را ذخیره می‌کند، نه عدد. بعد از بارگذاری دوباره، getItem("drink") هنوز tea است.
شیء باید به‌صورت JSON برود
اگر خود شیء را به setItem بدهی، متن [object Object] ذخیره می‌شود. JSON.stringify متنی می‌سازد که بشود نگه‌اش داشت. JSON.parse دوباره شیء می‌سازد. JSON.parse(null) خطا می‌دهد، پس اول مقدار را بخوان و اگر null بود parse نکن.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
لاگ lida / tea است. کلید w3-order متن دارد و back دوباره شیء است. هر صفحه روی همین مبدأ می‌تواند آن کلید را بخواند.
عمر تب، یا عمر مرورگر
sessionStorage همان سه متد را دارد. تا وقتی آن تب باز است زنده است. localStorage وقتی مرورگر دوباره باز شود هنوز هست. removeItem یک کلید را پاک می‌کند. clear همهٔ کلیدهای همین مبدأ را پاک می‌کند، پس برای مرتب کردن یک سفارش صدایش نزن.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
لاگ‌ها mint و بعد null هستند. تب دوم آن کلید sessionStorage را ندارد. کلید w3-order در localStorage در هر دو تب هست. بستن تب فقط یادداشت نشست را می‌برد.
یک مبدأ، همهٔ صفحه‌ها
این جعبه بین طرح، میزبان و درگاه مشترک است. جعبهٔ یک فایل نیست. کلیدی که در صفحهٔ اول بگذاری در صفحهٔ سفارش همان سایت دیده می‌شود. سایت دیگر آن را نمی‌خواند.
خط صفحه
صفحه سفارش را می‌نویسد، برمی‌خواند، و مهمان و نوشیدنی را نشان می‌دهد.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
خط saved / lida / tea است. نمونه را دوباره بارگذاری کن؛ همان واژه‌ها از localStorage برمی‌گردند. true / Order: mint مال صفحهٔ الگو بود.
پشت پیشخوان
- drink را tea بگذار. getItem مقدار tea برمی‌گرداند.
- getItem برای size مقدار null برمی‌گرداند.
- سفارش را با JSON.stringify ذخیره کن. بعد از parse لاگ lida / tea است.
- mint را در sessionStorage بگذار و removeItem کن. getItem مقدار null برمی‌گرداند.
- صفحه را بخوان. خط saved / lida / tea است.
جاهایی که اشتباه می‌شود
ذخیره رشته را یادش می‌ماند، نه شیء زنده را. clear کل مبدأ است، نه یک کلید.
- دادن شیء به
setItemو بعد خواندن[object Object] - صدا زدن
JSON.parseرویnull - انتظار اینکه
sessionStorageدر تب تازه بماند - صدا زدن
clearو پاک شدن همهٔ کلیدهای سایت - خواندن خط به‌شکل true / Order: mint
این‌ها را نگه دار
setItemوgetItemرشته ذخیره می‌کنند و می‌خوانند- کلید نبوده
nullاست - شیء با
JSON.stringifyمی‌رود و باJSON.parseبرمی‌گردد localStorageبعد از راه‌اندازی دوباره می‌ماند؛sessionStorageبا تب تمام می‌شود- خط صفحه saved / lida / tea است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود