Web Storage API (Web Storage API)
اینجا با «ذخیره سازی وب (Web Storage API)» آشنا می شویم. این API یعنی راه ساده ذخیره و بازیابی داده داخل مرورگر. سپس بدون سرور، داده کوچک نگه می داریم؛ مثل اسم کاربر.
Web Storage چیست؟
دو بخش دارد: localStorage و sessionStorage. اولی داده را بدون تاریخ انقضا نگه می دارد. دومی فقط تا بستن مرورگر می ماند. هر دو «کلید/مقدار» ذخیره می کنند.
localStorage: ذخیره پایدار
با setItem ذخیره می کنیم. با getItem می خوانیم. این داده بعد از بستن مرورگر هم می ماند.
localStorage.setItem("name", "John Doe");
const value = localStorage.getItem("name");
console.log(value);
sessionStorage: فقط برای یک نشست
این یکی شبیه localStorage است؛ اما با بستن مرورگر پاک می شود. پس برای چیزهای موقت عالی است.
sessionStorage.setItem("name", "John Doe");
const temp = sessionStorage.getItem("name");
console.log(temp);
مدیریت کلیدها و پاک سازی
می توانیم کلید n ام را با key(n) بخوانیم، تعداد را با length ببینیم، یا با removeItem و clear() پاک کنیم.
const count = localStorage.length;
console.log(count);
const firstKey = localStorage.key(0);
console.log(firstKey);
localStorage.removeItem("name");
localStorage.clear();
نکته: برای جابه جایی بین صفحات، History API را ببین. برای وظایف پس زمینه، به Web Workers سر بزن.
گام های عملی
- یک کلید با
setItemذخیره کن. - آن را با
getItemبخوان. - تعداد را با
lengthبررسی کن. - در صورت نیاز، با
clear()همه را پاک کن.
جمع بندی سریع
- Web Storage API داده کوچک را نگه می دارد.
- localStorage پایدار است و می ماند.
- sessionStorage موقت است و پاک می شود.
- متدهای کلیدی: setItem، getItem، removeItem، clear.