آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیره‌سازی داده‌ها در مرورگر

در دنیای توسعه وب، نیاز به ذخیره‌سازی داده‌های کاربر در مرورگر به صورت محلی به‌طور مداوم در حال افزایش است. برای این منظور، Local Storage و Session Storage دو ابزار بسیار مهم هستند که جاوااسکریپت فراهم می‌کند. این ابزارها به شما این امکان را می‌دهند که داده‌ها را بدون نیاز به سرور در مرورگر کاربر ذخیره کنید. در این مقاله به بررسی نحوه کار با Local Storage و Session Storage می‌پردازیم و همچنین نکات مرتبط با سئو و بهینه‌سازی را نیز مرور خواهیم کرد.

اهداف این مقاله:

• معرفی Local Storage و Session Storage

• نحوه ذخیره‌سازی و بازیابی داده‌ها

• تفاوت‌ها و کاربردهای آن‌ها

• نکات بهینه‌سازی برای تجربه کاربری و سئو

مقدمه

Local Storage و Session Storage دو مکانیزم ذخیره‌سازی داده در مرورگر هستند که به شما این امکان را می‌دهند تا داده‌ها را به صورت کلید-مقدار (key-value) ذخیره کنید. هر دوی این‌ها توسط جاوااسکریپت قابل دسترسی هستند و به شما اجازه می‌دهند داده‌ها را بدون نیاز به سرور و به‌صورت سریع و ساده مدیریت کنید. تفاوت اصلی بین این دو در طول عمر داده‌ها است:

• Local Storage: داده‌ها تا زمانی که به صورت دستی حذف نشوند، در مرورگر ذخیره می‌شوند. این داده‌ها پس از بستن مرورگر نیز باقی می‌مانند.

• Session Storage: داده‌ها تنها برای مدت زمان یک جلسه (Session) مرورگر ذخیره می‌شوند و با بستن تب یا پنجره مرورگر حذف می‌شوند.

گام اول: کار با Local Storage

Local Storage یکی از رایج‌ترین روش‌های ذخیره‌سازی داده‌ها به‌صورت دائمی در مرورگر است. شما می‌توانید داده‌ها را در قالب کلید-مقدار ذخیره کرده و هر زمان که نیاز دارید آن‌ها را بازیابی کنید.

ذخیره‌سازی داده در Local Storage

برای ذخیره‌سازی داده در Local Storage از متد setItem استفاده می‌کنیم:

localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('email', 'john.doe@example.com');

در این مثال، یک نام کاربری و ایمیل به صورت کلید-مقدار در Local Storage ذخیره می‌شود.

بازیابی داده از Local Storage

برای بازیابی داده از Local Storage از متد getItem استفاده می‌کنیم:

const username = localStorage.getItem('username');
const email = localStorage.getItem('email');
console.log(username); // Output: JohnDoe
console.log(email); // Output: john.doe@example.com

حذف داده از Local Storage

برای حذف یک کلید خاص از Local Storage از متد removeItem استفاده می‌کنیم:

localStorage.removeItem('username');

پاک کردن تمامی داده‌ها از Local Storage

برای پاک کردن تمامی داده‌های موجود در Local Storage از متد clear استفاده می‌کنیم:

localStorage.clear();

گام دوم: کار با Session Storage

Session Storage مانند Local Storage است، اما داده‌ها تنها برای مدت زمان یک جلسه مرورگر ذخیره می‌شوند. وقتی تب یا پنجره مرورگر بسته می‌شود، تمامی داده‌های ذخیره‌شده در Session Storage حذف می‌شوند.

ذخیره‌سازی داده در Session Storage

sessionStorage.setItem('sessionID', '123456');

در این مثال، یک مقدار با کلید sessionID در Session Storage ذخیره می‌شود.

بازیابی داده از Session Storage

const sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // Output: 123456

حذف داده از Session Storage

sessionStorage.removeItem('sessionID');

پاک کردن تمامی داده‌ها از Session Storage

sessionStorage.clear();

گام سوم: ذخیره‌سازی داده‌های پیچیده (آبجکت‌ها)

Local Storage و Session Storage تنها داده‌ها را به صورت رشته (string) ذخیره می‌کنند. برای ذخیره کردن داده‌های پیچیده‌تر مثل آبجکت‌ها، ابتدا باید آن‌ها را به رشته JSON تبدیل کرده و سپس ذخیره کنیم.

ذخیره‌سازی آبجکت در Local Storage

const user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

بازیابی آبجکت از Local Storage

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: John Doe
console.log(storedUser.age); // Output: 30

گام چهارم: تفاوت‌های Local Storage و Session Storage

گام پنجم: نکات بهینه‌سازی و سئو

• استفاده از Local Storage برای ذخیره‌سازی داده‌های مهم و طولانی‌مدت: داده‌هایی مانند تنظیمات کاربر، اطلاعات ورود یا پیکربندی‌ها که به صورت طولانی‌مدت نیاز به نگهداری دارند، باید در Local Storage ذخیره شوند.

• استفاده از Session Storage برای ذخیره‌سازی داده‌های موقت: داده‌هایی مانند وضعیت فعلی کاربر در یک فرم یا اطلاعاتی که تنها برای مدت زمان یک جلسه کاربرد دارند، باید در Session Storage ذخیره شوند.

• بهینه‌سازی تجربه کاربری: با استفاده از Local Storage و Session Storage می‌توانید تجربه کاربری بهتری ایجاد کنید. برای مثال، می‌توانید اطلاعات ورود کاربر را ذخیره کنید تا هر بار نیاز به ورود دوباره نداشته باشد یا اطلاعات فرم را نگه دارید تا پس از بستن مرورگر، دوباره قابل استفاده باشد.

• پیشگیری از استفاده نادرست از حافظه مرورگر: به‌خصوص در مرورگرهایی که محدودیت حافظه دارند، بهتر است داده‌های غیرضروری را از Local Storage و Session Storage پاک کنید تا فضای مرورگر بهینه باقی بماند.

• امنیت و ذخیره‌سازی داده‌ها: هرگز داده‌های حساس مانند رمزهای عبور یا اطلاعات کارت اعتباری را در Local Storage یا Session Storage ذخیره نکنید. این داده‌ها می‌توانند توسط اسکریپت‌های مخرب یا دسترسی‌های غیرمجاز به مرورگر در دسترس قرار گیرند.

• استفاده از داده‌های JSON: همیشه سعی کنید داده‌های پیچیده را به فرمت JSON تبدیل کرده و در Local Storage ذخیره کنید. JSON به شما این امکان را می‌دهد که داده‌های آبجکتی و پیچیده‌تر را به‌راحتی ذخیره و بازیابی کنید.

• بهبود سرعت و کاهش بار روی سرور: استفاده از Local Storage برای نگهداری موقت داده‌هایی که نیاز به ارسال مجدد به سرور ندارند، باعث کاهش درخواست‌ها به سرور و افزایش سرعت بارگذاری صفحات وب می‌شود. این موضوع می‌تواند به بهبود سئو و رتبه‌بندی سایت در گوگل کمک کند.

نتیجه‌گیری

Local Storage و Session Storage دو ابزار مفید برای ذخیره‌سازی داده‌ها در مرورگر هستند که به شما امکان می‌دهند داده‌ها را به صورت کلید-مقدار مدیریت کنید. با استفاده از این ابزارها می‌توانید تجربه کاربری بهتری فراهم کنید و عملکرد سایت را بهبود دهید. با توجه به ویژگی‌های هرکدام، می‌توانید تصمیم بگیرید که از Local Storage برای ذخیره‌سازی طولانی‌مدت و از Session Storage برای ذخیره‌سازی موقت استفاده کنید.