چگونه می‌توانیم از Web Storage (مثل LocalStorage و SessionStorage) استفاده کنیم؟

توحید صراف زاده
2025-04-06
طراحی و توسعه وب

🗂️ Web Storage در جاوااسکریپت؛ ذخیره‌سازی ساده، سریع و محلی!

محتوا نمایش

اگه تا حالا خواستید داده‌هایی مثل وضعیت ورود کاربر، آیتم‌های سبد خرید یا یه لیست کارها رو بدون اتصال به سرور و به‌صورت محلی ذخیره کنید، اینجاست که Web Storage API به کمکتون میاد! 🚀

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

🔍 دو نوع اصلی Web Storage:

Session Storage (ذخیره‌سازی نشست)
⏳ داده‌ها فقط تا زمانی که تب مرورگر باز است باقی می‌مانند.
Local Storage (ذخیره‌سازی محلی)
📦 داده‌ها حتی پس از بستن مرورگر هم باقی می‌مانند (مگر اینکه به‌صورت دستی پاک شوند).

📌 هر دو مثل آبجکت‌های معمولی جاوااسکریپت رفتار می‌کنن، اما با مزیت مهمی: داده‌هاشون با رفرش صفحه از بین نمی‌رن!

🎯 هدف این مقاله:
✅ بررسی تفاوت‌های بین Session Storage و Local Storage
✅ آموزش نحوه استفاده از آن‌ها در جاوااسکریپت
✅ تمرین عملی ساخت یک اپلیکیشن ساده To-Do List برای ذخیره وظایف با استفاده از Web Storage

🌟 اگه می‌خواید برنامه‌هاتون تجربه کاربری بهتری داشته باشن و داده‌ها به‌سادگی بین جلسات حفظ بشن، یادگیری Web Storage یک ضرورت جدیه. آماده‌اید وارد دنیای ذخیره‌سازی محلی در مرورگر بشیم؟ بزن بریم! 🧠💻

📦 شیء Session Storage چیه؟

Session Storage (یا همون آبجکت window.sessionStorage) بهتون این امکان رو می‌ده که داده‌هایی رو فقط برای مدت زمان فعال بودن یک تب مرورگر ذخیره کنید.

🔹 به زبان ساده‌تر:
اطلاعاتی که توی sessionStorage می‌ذارید، با رفرش صفحه پاک نمی‌شن، ولی به‌محض اینکه تب یا پنجره مرورگر رو ببندید، از بین می‌رن.

🧠 نکات مهم درباره‌ی sessionStorage:

داده‌هاش بر اساس مبدأ (origin) و تب مرورگر (instance) جدا هستند.
مثلا: http://freecodecamp.com با https://freecodecamp.com دوتا sessionStorage کاملاً جدا دارن، چون یکی httpـه و اون یکی https.
چون sessionStorage per-instance هست، یعنی فقط تو همون تب فعاله و اگه تب رو ببندید، اطلاعاتش می‌پره.
مرورگر برای هر تب یا پنجره‌ای که باز می‌کنید، یه session جداگانه می‌سازه. این یعنی می‌تونید چند بار یه اپلیکیشن رو تو تب‌های مختلف باز کنید، بدون اینکه تداخلی بین داده‌ها پیش بیاد.
(برخلاف کوکی‌ها که ممکنه تو این حالت دردسر درست کنن.)
sessionStorage بخشی از آبجکت سراسری window هست.
یعنی این دو خط کد دقیقاً یکی هستن:

sessionStorage.setItem('key', 'value'); // همون کار رو می‌کنه که: window.sessionStorage.setItem('key', 'value');

1
2
3
4

sessionStorage.setItem('key', 'value');
// همون کار رو می‌کنه که:
window.sessionStorage.setItem('key', 'value');

🗃️ شیء Local Storage چیه؟

Local Storage (آبجکت window.localStorage) برای ذخیره‌سازی داده‌هایی به کار می‌ره که حتی بعد از بسته‌شدن تب یا مرورگر هم باقی می‌مونن.

🔹 یعنی:
اطلاعاتی که تو localStorage ذخیره می‌کنید، با رفرش یا حتی بستن مرورگر هم پاک نمی‌شن.
هیچ تاریخ انقضایی هم ندارن، مگه اینکه شما خودتون بخواید حذفشون کنید.

🧹 چه زمانی این داده‌ها حذف می‌شن؟

وقتی که با جاوااسکریپت از روش‌هایی مثل localStorage.clear() یا removeItem() استفاده کنید
یا اینکه کش مرورگر به‌صورت دستی پاک بشه

🧠 نکات مهم درباره‌ی localStorage:

محدودیت حجمی تو localStorage معمولاً از sessionStorage بیشتره (حدود ۵ تا ۱۰ مگابایت، بسته به مرورگر).
مثل sessionStorage، localStorage هم بر اساس origin داده‌ها رو جداگانه ذخیره می‌کنه.
تو فایل‌هایی که با file:/// اجرا می‌شن (یعنی از لوکال اجرا می‌شن، نه از سرور)، ممکنه رفتار مرورگرها متفاوت باشه.
و بله، localStorage هم مثل sessionStorage به آبجکت window تعلق داره:

localStorage.setItem('key', 'value'); // معادل با: window.localStorage.setItem('key', 'value');

1
2
3
4

localStorage.setItem('key', 'value');
// معادل با:
window.localStorage.setItem('key', 'value');

📌 اگه خواستی، می‌تونم یه مثال واقعی با یه To-Do List ساده برات بنویسم که با sessionStorage یا localStorage کار کنه و به‌صورت زنده ببینی این مفاهیم چطوری استفاده می‌شن.
فقط کافیه بگی کدوم رو ترجیح می‌دی 😊

🗂️ چطور به Session Storage و Local Storage دسترسی پیدا کنیم؟

برای استفاده از Web Storage (یعنی sessionStorage و localStorage) دو راه اصلی وجود داره:

استفاده از دسترسی مستقیم مثل آبجکت‌های معمول جاوااسکریپت
استفاده از متدهای رسمی و داخلی Web Storage

📌 مثال از سه روش مختلف برای تنظیم یک مقدار:

sessionStorage.bestColor = "Green";
sessionStorage["bestColor"] = "Green";
sessionStorage.setItem("bestColor", "Green");

sessionStorage.bestColor = "Green";

sessionStorage["bestColor"] = "Green";

sessionStorage.setItem("bestColor", "Green");

هر سه خط بالا مقدار "Green" رو به کلید bestColor نسبت می‌دن.
اما ✅ روش سوم پیشنهاد می‌شه، چون با متد رسمی setItem() کار می‌کنه و از نظر سازگاری و امنیت بهتره.

🔧 متدهای کاربردی Web Storage

اینا متدهای اصلی هستن که برای خواندن و نوشتن در Web Storage استفاده می‌شن (چه localStorage، چه sessionStorage):

متد / ویژگی	کاربرد
`setItem(key, value)`	ذخیره یک مقدار برای یک کلید خاص
`getItem(key)`	دریافت مقدار ذخیره‌شده برای یک کلید
`removeItem(key)`	حذف یک کلید و مقدارش
`clear()`	پاک کردن تمام داده‌های ذخیره‌شده
`key(index)`	دریافت نام یک کلید بر اساس شماره ایندکس
`length`	تعداد کلیدهای ذخیره‌شده تو Storage

🧪 چند مثال کاربردی و ساده

🟠 مثال ۱: ذخیره‌سازی در `sessionStorage`

sessionStorage.setItem("color", "Pink");
console.log(sessionStorage);
// خروجی: {color: "Pink"}

sessionStorage.setItem("color", "Pink");

console.log(sessionStorage);

// خروجی: {color: "Pink"}

🟢 مثال ۲: ذخیره‌سازی در `localStorage`

localStorage.setItem("color", "Pink");
console.log(localStorage);
// خروجی: {color: "Pink"}

localStorage.setItem("color", "Pink");

console.log(localStorage);

// خروجی: {color: "Pink"}

📌 توجه: اگه قبلاً داده‌ای تو storage ذخیره شده باشه، همراه با مقدار جدید تو خروجی نشون داده می‌شه.

🔴 مثال ۳: ذخیره آبجکت به‌صورت مستقیم (اشتباه رایج)

sessionStorage.setItem("myBio", { name: "Oluwatobi" });
console.log(sessionStorage);
// خروجی: {myBio: "[object Object]"}

sessionStorage.setItem("myBio", { name: "Oluwatobi" });

console.log(sessionStorage);

// خروجی: {myBio: "[object Object]"}

🚫 اینجا مرورگر نمی‌تونه آبجکت رو مستقیماً ذخیره کنه و فقط رشته‌ی [object Object] رو نگه می‌داره.

✅ مثال ۴: ذخیره آبجکت به‌صورت درست با `JSON.stringify()`

sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));
console.log(sessionStorage);
// خروجی: {myBio: '{"name":"Oluwatobi"}'}

sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

console.log(sessionStorage);

// خروجی: {myBio: '{"name":"Oluwatobi"}'}

با JSON.stringify() آبجکت رو به فرمت JSON تبدیل می‌کنیم تا به‌درستی ذخیره بشه.

🔍 متد `key(index)` چیه و چه کاربردی داره؟

اگه بخوای اسم کلید رو بر اساس موقعیتش تو storage بگیری، از این متد استفاده کن:

let keyName = sessionStorage.key(0);
console.log(keyName); // مثلاً: "color"

let keyName = sessionStorage.key(0);

console.log(keyName); // مثلاً: "color"

🗂️ بررسی متدهای Web Storage با مثال‌های واقعی

در این بخش به‌صورت کامل، روان و کاربردی با متدهای مختلف sessionStorage و localStorage آشنا می‌شیم و مثال‌هاشون رو بررسی می‌کنیم 👇

🟢 مثال ۱: دریافت نام آیتم‌ها با متد `key()` در `sessionStorage`

sessionStorage.setItem("carColor", "Pink");
sessionStorage.setItem("pcColor", "Yellow");
sessionStorage.setItem("laptopColor", "White");

console.log(sessionStorage.key(1)); // خروجی ممکنه باشه: "pcColor"

sessionStorage.setItem("carColor", "Pink");

sessionStorage.setItem("pcColor", "Yellow");

sessionStorage.setItem("laptopColor", "White");

console.log(sessionStorage.key(1)); // خروجی ممکنه باشه: "pcColor"

📌 نکته مهم: ترتیب آیتم‌ها بستگی به مرورگر داره. پس روی ثبات خروجی key() حساب نکنید!

🟢 مثال ۲: دریافت نام آیتم‌ها در `localStorage` با متد `key()`

localStorage.setItem("carColor", "Pink");
localStorage.setItem("pcColor", "Yellow");
localStorage.setItem("laptopColor", "White");

console.log(localStorage.key(1)); // ممکنه باشه: "pcColor"

localStorage.setItem("carColor", "Pink");

localStorage.setItem("pcColor", "Yellow");

localStorage.setItem("laptopColor", "White");

console.log(localStorage.key(1)); // ممکنه باشه: "pcColor"

📥 متد `getItem()` چیه؟

از این متد برای دریافت مقدار یک کلید خاص استفاده می‌شه.

🔹 مثال در `sessionStorage`:

sessionStorage.setItem("color", "Pink");
console.log(sessionStorage.getItem("color")); // "Pink"

sessionStorage.setItem("color", "Pink");

console.log(sessionStorage.getItem("color")); // "Pink"

🔹 مثال در `localStorage`:

localStorage.setItem("color", "Pink");
console.log(localStorage.getItem("color")); // "Pink"

localStorage.setItem("color", "Pink");

console.log(localStorage.getItem("color")); // "Pink"

📌 اگه کلید موردنظر وجود نداشته باشه، خروجی null خواهد بود.

📏 ویژگی `length` چیه؟

ویژگی length نشون می‌ده چندتا آیتم تو Storage ذخیره شده.

🔹 مثال در `sessionStorage`:

sessionStorage.setItem("carColor", "Pink");
sessionStorage.setItem("pcColor", "Yellow");
sessionStorage.setItem("laptopColor", "White");

console.log(sessionStorage.length); // 3

sessionStorage.setItem("carColor", "Pink");

sessionStorage.setItem("pcColor", "Yellow");

sessionStorage.setItem("laptopColor", "White");

console.log(sessionStorage.length); // 3

🔹 مثال در `localStorage`:

localStorage.setItem("carColor", "Pink");
localStorage.setItem("pcColor", "Yellow");
localStorage.setItem("laptopColor", "White");

console.log(localStorage.length); // 3

localStorage.setItem("carColor", "Pink");

localStorage.setItem("pcColor", "Yellow");

localStorage.setItem("laptopColor", "White");

console.log(localStorage.length); // 3

❌ متد `removeItem()` چیه؟

برای حذف یک آیتم خاص از Storage استفاده می‌شه.

🔹 مثال در `sessionStorage`:

sessionStorage.setItem("pcColor", "Yellow");
sessionStorage.removeItem("pcColor");

console.log(sessionStorage.getItem("pcColor")); // null

sessionStorage.setItem("pcColor", "Yellow");

sessionStorage.removeItem("pcColor");

console.log(sessionStorage.getItem("pcColor")); // null

🔹 مثال در `localStorage`:

localStorage.setItem("pcColor", "Yellow");
localStorage.removeItem("pcColor");

console.log(localStorage.getItem("pcColor")); // null

localStorage.setItem("pcColor", "Yellow");

localStorage.removeItem("pcColor");

console.log(localStorage.getItem("pcColor")); // null

📌 اگه کلید وجود نداشته باشه، متد بدون خطا نادیده گرفته می‌شه.

🧹 متد `clear()` چیه؟

تمام آیتم‌های ذخیره‌شده در یک Storage رو پاک می‌کنه.

🔹 مثال در `sessionStorage`:

sessionStorage.setItem("carColor", "Pink");
sessionStorage.setItem("pcColor", "Yellow");
sessionStorage.setItem("laptopColor", "White");

sessionStorage.clear();

console.log(sessionStorage); // {length: 0}

sessionStorage.setItem("carColor", "Pink");

sessionStorage.setItem("pcColor", "Yellow");

sessionStorage.setItem("laptopColor", "White");

sessionStorage.clear();

console.log(sessionStorage); // {length: 0}

✅ تمرین عملی: ساخت اپلیکیشن لیست کارها (To-Do) با Web Storage

فرض کن یه To-Do ساده ساختی، اما یه مشکل داره…

🛑 مشکل رایج:

کارهایی که کاربر وارد می‌کنه، بعد از رفرش صفحه یا بستن مرورگر از بین می‌رن!

📖 بیشتر بخوانید:چگونه تجربه کاربری را به نقطه قوت برندمان تبدیل کنیم؟

🎯 اهداف این تمرین چیه؟

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

🔹 بخش ۱: ذخیره‌سازی داده‌ها در `sessionStorage`

sessionAddTaskBtn.addEventListener('click', () =&gt; {
  const currentTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: sessionInputEle.value },
  ];

  sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

  const todoLiElements = createTodoLiElements(newTodoArray);
  sessionTodosContainer.replaceChildren(...todoLiElements);
  sessionInputEle.value = '';
});

sessionAddTaskBtn.addEventListener('click', () => {

const currentTodoArray =

JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

const newTodoArray = [

...currentTodoArray,

{ checked: false, text: sessionInputEle.value },

];

sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

const todoLiElements = createTodoLiElements(newTodoArray);

sessionTodosContainer.replaceChildren(...todoLiElements);

sessionInputEle.value = '';

});

🔹 بخش ۲: ذخیره‌سازی داده‌ها در `localStorage`

📌 نکته: در نسخه قبلی، اشتباهی از sessionStorage استفاده شده بود که اینجا اصلاح شده به localStorage.

localAddTaskBtn.addEventListener('click', () =&gt; {
  const currentTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: localInputEle.value },
  ];

  localStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

  const todoLiElements = createTodoLiElements(newTodoArray);
  localTodosContainer.replaceChildren(...todoLiElements);
  localInputEle.value = '';
});

localAddTaskBtn.addEventListener('click', () => {

const currentTodoArray =

JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

const newTodoArray = [

...currentTodoArray,

{ checked: false, text: localInputEle.value },

];

localStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

const todoLiElements = createTodoLiElements(newTodoArray);

localTodosContainer.replaceChildren(...todoLiElements);

localInputEle.value = '';

});

🔹 بخش ۳: نمایش خودکار داده‌ها بعد از رفرش یا باز شدن مجدد

📍 نمایش اطلاعات `sessionStorage` در زمان بارگذاری صفحه:

window.addEventListener('load', () =&gt; {
  const sessionTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  const todoLiElements = createTodoLiElements(sessionTodoArray);
  sessionTodosContainer.replaceChildren(...todoLiElements);
});

window.addEventListener('load', () => {

const sessionTodoArray =

JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

const todoLiElements = createTodoLiElements(sessionTodoArray);

sessionTodosContainer.replaceChildren(...todoLiElements);

});

📍 نمایش اطلاعات `localStorage` در زمان بارگذاری صفحه:

window.addEventListener('load', () =&gt; {
  const localTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  const todoLiElements = createTodoLiElements(localTodoArray);
  localTodosContainer.replaceChildren(...todoLiElements);
});

window.addEventListener('load', () => {

const localTodoArray =

JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

const todoLiElements = createTodoLiElements(localTodoArray);

localTodosContainer.replaceChildren(...todoLiElements);

});

💡 تمرین اضافی: کار با Web Storage در کنسول مرورگر

🔸 تعداد آیتم‌های موجود در sessionStorage:

console.log(sessionStorage.length);

1 2	console.log(sessionStorage.length);

🔸 دریافت نام اولین کلید در localStorage:

console.log(localStorage.key(0));

1 2	console.log(localStorage.key(0));

🔸 پاک کردن کامل sessionStorage:

sessionStorage.clear();

1 2	sessionStorage.clear();

🔍 مقایسه سریع: Web Storage vs Cookies

ویژگی	Web Storage	Cookies
حجم ذخیره‌سازی	تا چند مگابایت (۵MB به بالا)	حدود ۴KB
ارسال به سرور	❌ فقط سمت مرورگر ذخیره می‌شه	✅ با هر درخواست HTTP ارسال می‌شه
امنیت نسبی	بهتر از کوکی‌ها	آسیب‌پذیرتر در برابر برخی حملات
کاربرد مناسب	داده‌های محلی سمت کلاینت	احراز هویت و نشست‌ها

📊 مقایسه کامل بین Web Storage و Cookies

ویژگی	🍪 کوکی‌ها (Cookies)	💾 ذخیره‌سازی وب (Web Storage)
مالکیت (Property)	متعلق به شیء `Document`	متعلق به شیء `Window`
تاریخ انقضا	قابل‌تعریف توسط برنامه‌نویس با `expires`	توسط مرورگر تعیین می‌شه (یا session یا دائم)
دسترسی به داده‌ها	باید کل داده‌ها رو با `document.cookie` واکشی کنید	می‌تونید فقط کلید مورد نظر رو با `getItem("key")` بخونید
نحوه ذخیره داده	`document.cookie = "key=value";`	`webStorageObject.setItem("key", "value");`
خواندن داده‌ها	از طریق `document.cookie`	از طریق `webStorageObject.getItem("key");`
حذف داده	با تنظیم تاریخ گذشته برای کوکی	`webStorageObject.removeItem("key");`
ظرفیت ذخیره‌سازی	محدود به حدود ۴KB	بین ۵ تا ۱۰ مگابایت (بسته به مرورگر)
ارسال به سرور	✅ با هر درخواست HTTP ارسال می‌شه	❌ فقط در مرورگر ذخیره می‌مونه
مناسب برای	داده‌های سبک مثل احراز هویت و نشست‌ها	ذخیره داده‌های محلی اپلیکیشن‌ها بدون نیاز به سرور

✅ جمع‌بندی سریع:

توی این مقاله یاد گرفتیم که:

Web Storage چطور با متدهایی مثل setItem()، getItem()، removeItem() و clear() کار می‌کنه
چطور می‌تونیم با کمک Web Storage توی مرورگر یه To-Do ساده بسازیم و از حذف شدن داده‌ها جلوگیری کنیم
و مهم‌تر از همه، فهمیدیم چه تفاوت‌هایی بین Cookies و Web Storage وجود داره؛ از نظر حجم، امنیت، دسترسی و کاربرد.

سوالات متداول درباره Web Storage، localStorage و sessionStorage 🧠💾

کاربرد sessionStorage و localStorage چیست؟

✅ sessionStorage: ذخیره داده‌های موقتی که با بسته شدن تب پاک می‌شن
✅ localStorage: ذخیره داده‌های ماندگار که حتی بعد از بستن مرورگر هم باقی می‌مونن
هر دو بدون نیاز به سرور، مستقیماً در مرورگر اجرا می‌شن.

چگونه از localStorage در جاوااسکریپت استفاده کنیم؟

// ذخیره
localStorage.setItem("name", "Ali");

// دریافت
let name = localStorage.getItem("name");

// حذف
localStorage.removeItem("name");

// پاک‌سازی کامل
localStorage.clear();

// ذخیره

localStorage.setItem("name", "Ali");

// دریافت

let name = localStorage.getItem("name");

// حذف

localStorage.removeItem("name");

// پاک‌سازی کامل

localStorage.clear();

چگونه از sessionStorage استفاده کنیم؟

// ذخیره
sessionStorage.setItem("city", "Tehran");

// دریافت
let city = sessionStorage.getItem("city");

// حذف
sessionStorage.removeItem("city");

// پاک‌سازی کل session
sessionStorage.clear();

// ذخیره

sessionStorage.setItem("city", "Tehran");

// دریافت

let city = sessionStorage.getItem("city");

// حذف

sessionStorage.removeItem("city");

// پاک‌سازی کل session

sessionStorage.clear();

Web Storage به چه دردی می‌خورد؟

Web Storage یک API ساده و کاربردی برای ذخیره‌سازی محلی در مرورگر است.
مناسب برای اپ‌هایی مثل:

لیست کارها (TODO)
سبد خرید
تنظیمات کاربر
ذخیره اطلاعات فرم

چه زمانی از sessionStorage استفاده کنیم؟

زمانی که فقط می‌خوای اطلاعات در طول باز بودن تب یا صفحه فعال بمونه؛ مثل:

فرم چندمرحله‌ای
مراحل پرداخت
وضعیت ورود موقت

هدف از استفاده از Storage چیست؟

✅ ذخیره سریع داده بدون سرور
✅ نگهداری داده بین صفحات یا جلسات
✅ کاهش لود دوباره داده‌ها و بهبود تجربه کاربر

چرا از Storage استفاده می‌کنیم؟

چون:

سریع، ساده و سمت کلاینت است
مناسب برای اپلیکیشن‌های SPA
نیاز به دیتابیس ندارد

مهم‌ترین مزیت استفاده از Object Storage چیست؟

در فضای ابری، Object Storage مثل Amazon S3 یا Firebase مزایایی دارد:

مقیاس‌پذیری بالا
ذخیره‌سازی حجیم با هزینه کم
دسترسی جهانی با API
مناسب برای ویدیو، تصویر، بکاپ

استفاده بهینه از Storage یعنی چه؟

یعنی:

فقط داده‌های ضروری رو ذخیره کنیم
از JSON برای فشرده‌سازی و نظم استفاده کنیم
مرتب داده‌های قدیمی یا بلااستفاده رو پاک کنیم
مراقب پر شدن فضای مرورگر باشیم

توحید صراف زاده

من توحید صراف زاده، برنامه‌نویس با تحصیلات فوق لیسانس در رشته کامپیوتر از دانشگاه آزاد، تجربه طراحی و توسعه نرم‌افزارهای متنوعی مانند فالورگرام و چندین نرم‌افزار دیگر را دارم. در زبان‌های برنامه‌نویسی PHP، Java، HTML، C# و فریم‌ورک لاراول تخصص دارم و در طراحی سیستم‌های نرم‌افزاری پیشرفته فعالیت می‌کنم. علایق و اهداف شغلی بنده شامل همکاری با شرکت‌های فعال در حوزه طراحی نرم‌افزار و تولید محتوای تخصصی در زمینه برنامه‌نویسی میباشد.

چگونه سیستم‌های آبیاری هوشمند به رشد بهتر گیاهان کمک می‌کنند؟

چگونه هوش مصنوعی و IoT با هم زندگی ما را هوشمندتر می‌کنند؟

چگونه با Flexbox چیدمان واکنش‌گرا بسازیم؟

با ما در تماس باشید.

start end

04/06 2025

طراحی و توسعه وب

چگونه با Flexbox چیدمان واکنش‌گرا بسازیم؟

publish on 2025-04-06

🎨 چیدمان وب در دنیای مدرن؛ از Float تا Flexbox و Grid 🧱✨ تا چند سال پیش، وقتی می‌خواستیم عناصر یک صفحه وب رو کنار هم بچینیم، تنها ابزارمون یه

by توحید صراف زاده

0 Comments

start end

04/06 2025

طراحی و توسعه وب

چگونه می‌توانیم از Web Storage (مثل LocalStorage و SessionStorage) استفاده کنیم؟

publish on 2025-04-06

🗂️ Web Storage در جاوااسکریپت؛ ذخیره‌سازی ساده، سریع و محلی! اگه تا حالا خواستید داده‌هایی مثل وضعیت ورود کاربر، آیتم‌های سبد خرید یا یه لیست کارها رو بدون اتصال به

by توحید صراف زاده

0 Comments

start end

04/05 2025

طراحی و توسعه وب

چگونه تجربه کاربری را به نقطه قوت برندمان تبدیل کنیم؟

publish on 2025-04-05

🎯 وب‌سایت شما برای مشتریان‌تان است، نه فقط برای برندتان! 🖥️✨ فرقی نمی‌کنه صاحب یه استارتاپ نوپا باشید یا مدیریت یه برند بزرگ رو به عهده داشته باشید—وقتی نوبت به

by توحید صراف زاده

0 Comments

start end

02/19 2025

طراحی و توسعه وب

چگونه یک پایگاه داده در MySQL ایجاد کنم؟

publish on 2025-02-19

در دنیای دیجیتال امروز،پایگاه داده‌هابه یکی از ستون‌های اصلی توسعه‌ی وب‌سایت‌ها و اپلیکیشن‌های مدرن تبدیل شده است. بدون یک سیستم پایگاه داده‌ی قدرتمند، ذخیره‌سازی، پردازش و بازیابی اطلاعات به یک

by توحید صراف زاده

0 Comments

start end

02/19 2025

طراحی و توسعه وب

چطور در جاوا اسکریپت با آرایه‌ها کار کنم؟ 2025 عصر برنامه نویسی

publish on 2025-02-19

در دنیای برنامه‌نویسی جاوااسکریپت، آرایه‌ها یکی از مهم‌ترین و پرکاربردترین ساختارهای داده هستند. برخلاف بسیاری از زبان‌های دیگر که آرایه‌ها را به‌عنوان نوع داده ابتدایی می‌شناسند، در جاوااسکریپت، آرایه‌ها در

by توحید صراف زاده

0 Comments

چگونه می‌توانیم از Web Storage (مثل LocalStorage و SessionStorage) استفاده کنیم؟

🔍 دو نوع اصلی Web Storage:

📦 شیء Session Storage چیه؟

🗃️ شیء Local Storage چیه؟

🗂️ چطور به Session Storage و Local Storage دسترسی پیدا کنیم؟

📌 مثال از سه روش مختلف برای تنظیم یک مقدار:

🔧 متدهای کاربردی Web Storage

🧪 چند مثال کاربردی و ساده

🟠 مثال ۱: ذخیره‌سازی در sessionStorage

🟢 مثال ۲: ذخیره‌سازی در localStorage

🔴 مثال ۳: ذخیره آبجکت به‌صورت مستقیم (اشتباه رایج)

✅ مثال ۴: ذخیره آبجکت به‌صورت درست با JSON.stringify()

🔍 متد key(index) چیه و چه کاربردی داره؟

🗂️ بررسی متدهای Web Storage با مثال‌های واقعی

🟢 مثال ۱: دریافت نام آیتم‌ها با متد key() در sessionStorage

🟢 مثال ۲: دریافت نام آیتم‌ها در localStorage با متد key()

📥 متد getItem() چیه؟

🔹 مثال در sessionStorage:

🔹 مثال در localStorage:

📏 ویژگی length چیه؟

🔹 مثال در sessionStorage:

🔹 مثال در localStorage:

❌ متد removeItem() چیه؟

🔹 مثال در sessionStorage:

🔹 مثال در localStorage:

🧹 متد clear() چیه؟

🔹 مثال در sessionStorage:

✅ تمرین عملی: ساخت اپلیکیشن لیست کارها (To-Do) با Web Storage

🛑 مشکل رایج:

🎯 اهداف این تمرین چیه؟

🔹 بخش ۱: ذخیره‌سازی داده‌ها در sessionStorage

🔹 بخش ۲: ذخیره‌سازی داده‌ها در localStorage

🔹 بخش ۳: نمایش خودکار داده‌ها بعد از رفرش یا باز شدن مجدد

📍 نمایش اطلاعات sessionStorage در زمان بارگذاری صفحه:

📍 نمایش اطلاعات localStorage در زمان بارگذاری صفحه:

💡 تمرین اضافی: کار با Web Storage در کنسول مرورگر

🔍 مقایسه سریع: Web Storage vs Cookies

📊 مقایسه کامل بین Web Storage و Cookies

✅ جمع‌بندی سریع:

سوالات متداول درباره Web Storage، localStorage و sessionStorage 🧠💾

کاربرد sessionStorage و localStorage چیست؟

چگونه از localStorage در جاوااسکریپت استفاده کنیم؟

چگونه از sessionStorage استفاده کنیم؟

Web Storage به چه دردی می‌خورد؟

چه زمانی از sessionStorage استفاده کنیم؟

هدف از استفاده از Storage چیست؟

چرا از Storage استفاده می‌کنیم؟

مهم‌ترین مزیت استفاده از Object Storage چیست؟

استفاده بهینه از Storage یعنی چه؟

دیدگاهتان را بنویسید لغو پاسخ

🟠 مثال ۱: ذخیره‌سازی در `sessionStorage`

🟢 مثال ۲: ذخیره‌سازی در `localStorage`

✅ مثال ۴: ذخیره آبجکت به‌صورت درست با `JSON.stringify()`

🔍 متد `key(index)` چیه و چه کاربردی داره؟

🟢 مثال ۱: دریافت نام آیتم‌ها با متد `key()` در `sessionStorage`

🟢 مثال ۲: دریافت نام آیتم‌ها در `localStorage` با متد `key()`

📥 متد `getItem()` چیه؟

🔹 مثال در `sessionStorage`:

🔹 مثال در `localStorage`:

📏 ویژگی `length` چیه؟

🔹 مثال در `sessionStorage`:

🔹 مثال در `localStorage`:

❌ متد `removeItem()` چیه؟

🔹 مثال در `sessionStorage`:

🔹 مثال در `localStorage`:

🧹 متد `clear()` چیه؟

🔹 مثال در `sessionStorage`:

🔹 بخش ۱: ذخیره‌سازی داده‌ها در `sessionStorage`

🔹 بخش ۲: ذخیره‌سازی داده‌ها در `localStorage`

📍 نمایش اطلاعات `sessionStorage` در زمان بارگذاری صفحه:

📍 نمایش اطلاعات `localStorage` در زمان بارگذاری صفحه: