بررسی Local Storage در جاوااسکریپت

سلام دوستان جاوااسکریپتی. توی این پست با یکی از کاربردی‌ترین ویژگی‌های جاوااسکریپت یعنی Local Storage آشنا می‌شیم و یاد می‌گیریم که چطور از اون استفاده کنیم


Local Storage چیه؟

Local Storage یک مکان ذخیره‌سازی هست که توی مرورگر کاربر وجود داره که این امکان رو به ما میده تا با جاوا اسکریپت یه سری اطلاعات رو ذخیره و استفاده کنیم. در واقع عملیات ثبت، خواندن، بروزرسانی و حذف (CRUD) رو می‌تونیم با فضایی که در اختیار داریم انجام بدیم. اطلاعاتی که در Local Storage ذخیره میشه دائمی هست. یعنی اگه کاربر تب مرورگر و یا حتی خود مرورگر رو ببنده، این اطلاعات حذف نمیشن.


متدهای Local Storage

Local Storage چهار متد در اختیار ما قرار داده تا عملیات CRUD رو انجام بدیم. این 4 متد شامل:

  • setItem()
  • getItem()
  • removeItem()
  • clear()

که این چهار مورد رو با هم بررسی می‌کنیم.

setItem()

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

localStorage.setItem('name', 'James Rodriguez');

تو این مثال name کلید و James Rodriguez مقدار این کلید هست.

این مثال خیلی ساده بود. ما می‌تونیم یک مقدار پیچیده‌تر مثلاً یک آبجکت رو توی Local Storage ذخیره کنیم. باید دقت داشته باشیم که توی Local Storage باید رشته ذخیره کنیم. پس قبل از ذخیره آبجکت، باید اون رو تبدیل به رشته کنیم:

const person = {
    name: 'Bastian',
    lastname: 'Schweinsteiger'
};

person = JSON.stringify(person);

localStorage.setItem('user', person);


getItem()

همونطور که از اسمش پیداست، این متد برای گرفتن یک آیتم از Local Storage استفاده میشه. این متد یک پارامتر میگیره که اسم کلید اون آیتم مورد نظر ما هست. خروجی این متد یک رشته هست.

مثال اول ما:

const name = localStorage.getItem('name');
console.log(name); // James Rodriguez

توی مثال دوم چون آبجکت رو به رشته تبدیل کردیم، موقع فراخونی اون آیتم، باید دوباره به آبجکت تبدیلش کنیم:

let user = localStorage.getItem('user');
user = JSON.parse(user);

console.log(user); // { &quotname&quot: &quotBastian&quot, &quotlastname&quot: &quotSchweinsteiger&quot }


removeItem()

این متد برای حذف کردن یک آیتم از Local Storge بکار میره. این متد یک ورودی میگیره که شامل کلید آیتم مورد نظر ما هست:

localStorage.removeItem('user');

console.log(localStorage.getItem('user')); // null


clear()

این متد همه آیتم‌هایی که توی LocalStorage وجود داره رو پاک میکنه. این متد هیچ پارامتری نمیگیره.

localStorage.clear();


دو تا نکته

دو تا نکته وجود داره که هنگام استفاده کردن از Local Storage باید در نظر داشته باشیم:

  • حداکثر فضایی که در اختیار داریم 5 مگابایت هست
  • اطلاعاتی که ذخیره میکنیم توسط مرورگر قابل دسترسی هست. پس باید حواسمون باشه اطلاعات حساس رو ذخیره نکنیم


خب دوستان این مقاله هم به پایان رسید. امیدوارم استفاده کرده باشید. منتظر نظراتتون هستم. روزتون خوش ??️?


Resources:

https://sarahchima.com/blog/using-the-local-storage/

https://ditty.ir/