68- آموزش جاوااسکریپت | پروژه عملی : قسمت 4 از 4 - ذخیره موقعیت جغرافیایی در LocalStorage و تکمیل نهایی اپلیکیشن آب‌وهوا

در بخش‌های قبلی، اطلاعات آب‌وهوا را دریافت کردیم و در رابط کاربری نمایش دادیم. اما در حال حاضر با هر بار بارگذاری مجدد مرورگر، تنظیمات به حالت اولیه برمی‌گردند.

در این بخش، قابلیت ذخیره موقعیت جغرافیایی را با استفاده از LocalStorage اضافه می‌کنیم تا آخرین شهر و ایالت انتخابی کاربر در مرورگر ذخیره و حفظ شود.

---

مدیریت تغییر موقعیت در app.js

ابتدا رویداد کلیک دکمه تغییر موقعیت (w-change-btn) را ثبت می‌کنیم. پس از کلیک روی این دکمه، مقادیر جدید ورودی‌ها را دریافت کرده، موقعیت کلاس آب‌وهوا را به‌روزرسانی می‌کنیم و مجدداً تابع دریافت اطلاعات را فراخوانی می‌کنیم تا رابط کاربری آپدیت شود.

برای بستن مودال Bootstrap پس از ثبت فرم، از یک خط کد ساده جی‌کوئری استفاده می‌کنیم، زیرا بوت‌استرپ برای مدیریت کامپوننت‌های خود به جی‌کوئری وابسته است.

کد بخش ثبت رویداد در app.js:

document.getElementById('w-change-btn').addEventListener('click', (e) => {
  const city = document.getElementById('city').value;
  const state = document.getElementById('state').value;

  // تغییر موقعیت در کلاس آب‌وهوا
  weather.changeLocation(city, state);

  // دریافت و نمایش مجدد اطلاعات آب‌وهوا
  getWeather();

  // بستن مودال با استفاده از جی‌کوئری
  $('#locModal').modal('hide');
});

---

ساخت کلاس Storage در storage.js

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

با توجه به اینکه فقط دو رشته متنی (نام شهر و ایالت) را ذخیره می‌کنیم، نیازی به استفاده از متدهای تبدیل نظیر JSON.stringify یا JSON.parse نیست.

کد فایل storage.js:

class Storage {
  constructor() {
    this.city;
    this.state;
    this.defaultCity = 'Miami';
    this.defaultState = 'FL';
  }

  getLocationData() {
    if (localStorage.getItem('city') === null) {
      this.city = this.defaultCity;
    } else {
      this.city = localStorage.getItem('city');
    }

    if (localStorage.getItem('state') === null) {
      this.state = this.defaultState;
    } else {
      this.state = localStorage.getItem('state');
    }

    return {
      city: this.city,
      state: this.state
    };
  }

  setLocationData(city, state) {
    localStorage.setItem('city', city);
    localStorage.setItem('state', state);
  }
}

---

اتصال Storage به بدنه اصلی برنامه

حالا کلاس ساخته‌شده را در فایل app.js مقداردهی اولیه می‌کنیم تا هنگام شروع برنامه، اطلاعات ذخیره‌شده را بخواند و به کلاس Weather تحویل دهد. همچنین زمان تغییر موقعیت، داده‌های جدید را در حافظه ذخیره کند.

نسخه نهایی و کامل فایل app.js:

// مقداردهی اولیه کلاس‌ها
const storage = new Storage();
// دریافت اطلاعات ذخیره‌شده
const weatherLocation = storage.getLocationData();

const weather = new Weather(weatherLocation.city, weatherLocation.state);
const ui = new UI();

// دریافت اطلاعات آب‌وهوا هنگام بارگذاری صفحه
document.addEventListener('DOMContentLoaded', getWeather);

// رویداد تغییر موقعیت
document.getElementById('w-change-btn').addEventListener('click', (e) => {
  const city = document.getElementById('city').value;
  const state = document.getElementById('state').value;

  // تغییر موقعیت
  weather.changeLocation(city, state);

  // ذخیره در LocalStorage
  storage.setItemData(city, state);

  // دریافت و به‌روزرسانی آب‌وهوا
  getWeather();

  // بستن مودال
  $('#locModal').modal('hide');
});

function getWeather() {
  weather.getWeather()
    .then(results => {
      ui.paint(results);
    })
    .catch(error => console.log(error));
}

توجه: در متد ثبت رویداد، نام متد ذخیره‌سازی کلاس خود را صدا می‌زنیم (storage.setLocationData(city, state)).

---

بررسی و تست نهایی پروژه

پس از ذخیره تغییرات، عملکرد برنامه را بررسی کنید:

1. به صورت پیش‌فرض وضعیت آب‌وهوای شهر پیش‌فرض (مثلاً Miami) نمایش داده می‌شود.
2. با کلیک بر روی دکمه تغییر موقعیت، شهر جدیدی مانند Boston و ایالت MA را وارد کرده و دکمه ذخیره را بزنید.
3. مودال بسته شده و اطلاعات Boston بارگذاری می‌شود.
4. صفحه را در مرورگر مجدداً بارگذاری (Reload) کنید. مشاهده می‌کنید که اطلاعات شهر Boston همچنان باقی مانده است.
5. بخش LocalStorage را در ابزار توسعه‌دهندگان مرورگر (Developer Tools -> Application -> Local Storage) بررسی کنید تا جفت کلید و مقدارهای ذخیره‌شده را ببینید.

---

نتیجه‌گیری

پروژه اپلیکیشن آب‌وهوا با موفقیت به پایان رسید. در این پروژه یاد گرفتیم که چگونه بدون استفاده از فریم‌ورک‌های سنگین مانند React یا Angular و صرفاً با استفاده از معماری کلاس‌محور در JavaScript خالص (Vanilla JS) یک اپلیکیشن کاملاً ساختاریافته، ماژولار و متصل به API واقعی بنویسیم که اطلاعات کاربر را نیز ذخیره می‌کند.