مدیریت آدرس و تاریخچه با location و history

آموزش جاوااسکریپت

مقدمه

در درس قبل با شیء window به عنوان هسته‌ی مرکزی BOM آشنا شدیم. دو پراپرتی بسیار مهم این شیء، location و history هستند که به ترتیب امکان تعامل با نوار آدرس مرورگر (URL) و تاریخچه بازدیدهای کاربر در همان تب را فراهم می‌کنند. با استفاده از این دو شیء، می‌توانیم اطلاعات کاملی از آدرس فعلی به دست آوریم، کاربر را به صفحات دیگر هدایت کنیم یا او را در تاریخچه مرورگر به عقب و جلو ببریم.

کار با آدرس صفحه با شیء Location

شیء location که از طریق `window.location` یا به سادگی `location` قابل دسترسی است، اطلاعات دقیقی درباره URL فعلی صفحه ارائه می‌دهد و همچنین متدهایی برای بارگذاری صفحات جدید دارد.

پراپرتی‌های مهم شیء location

این شیء URL را به بخش‌های مختلفی تقسیم می‌کند که هر کدام از طریق یک پراپرتی قابل دسترسی هستند:

  • href: کل آدرس URL را به صورت یک رشته برمی‌گرداند.
  • protocol: پروتکل استفاده شده را نشان می‌دهد (مثلاً "https:" یا "http:").
  • hostname: نام دامنه را برمی‌گرداند (مثلاً "www.example.com").
  • port: شماره پورت را نشان می‌دهد (اگر پورتی مشخص نشده باشد، رشته خالی برمی‌گرداند).
  • pathname: مسیر فایل روی سرور را نشان می‌دهد (مثلاً "/path/to/page.html").
  • search: کوئری استرینگ (query string) را برمی‌گرداند که با علامت '?' شروع می‌شود.
  • hash: بخش هش یا فرگمنت (fragment) آدرس را که با '#' شروع می‌شود، برمی‌گرداند.
Copy Icon JAVASCRIPT 
// Assuming the URL is: https://www.example.com:8080/path?query=123#section1

console.log(location.href);     // "https://www.example.com:8080/path?query=123#section1"
console.log(location.hostname); // "www.example.com"
console.log(location.pathname); // "/path"
console.log(location.search);   // "?query=123"

کد بالا نشان می‌دهد که چطور با فرض یک URL مشخص، می‌توان به سادگی به بخش‌های مختلف آن از طریق پراپرتی‌های شیء location دسترسی پیدا کرد. این قابلیت برای تحلیل آدرس و انجام عملیات بر اساس پارامترهای URL بسیار کاربردی است.

متدهای شیء location

برای هدایت کاربر به یک صفحه دیگر یا بارگذاری مجدد صفحه فعلی، می‌توان از متدهای زیر استفاده کرد:

  • assign(url): یک URL جدید را بارگذاری می‌کند. صفحه فعلی در تاریخچه مرورگر ذخیره می‌شود و کاربر می‌تواند با دکمه Back برگردد.
  • replace(url): یک URL جدید را جایگزین صفحه فعلی می‌کند. صفحه فعلی از تاریخچه حذف می‌شود، بنابراین دکمه Back کار نخواهد کرد.
  • reload(): صفحه فعلی را دوباره بارگذاری می‌کند (معادل فشردن کلید F5).
Copy Icon JAVASCRIPT 
// To navigate to a new page
location.assign('https://google.com');

// To redirect without saving to history
location.replace('https://google.com');

// To reload the current page
location.reload();

کدهای بالا روش استفاده از متدهای ناوبری را نشان می‌دهند. متد assign() برای ناوبری عادی و متد replace() برای ریدایرکت کردن (مثلاً پس از لاگین موفق) کاربرد دارد.

پیمایش با شیء History

شیء history به شما اجازه می‌دهد در تاریخچه نشست (session history) فعلی کاربر حرکت کنید. به دلایل امنیتی، شما نمی‌توانید URLهای موجود در تاریخچه را بخوانید، اما می‌توانید کاربر را به عقب یا جلو هدایت کنید.

متدهای شیء history

  • length: یک پراپرتی که تعداد صفحات موجود در تاریخچه نشست را نشان می‌دهد.
  • back(): معادل کلیک روی دکمه Back مرورگر است و به صفحه قبلی می‌رود.
  • forward(): معادل کلیک روی دکمه Forward مرورگر است.
  • go(number): به یک صفحه مشخص در تاریخچه می‌رود. برای مثال، go(-1) معادل back() و go(2) دو صفحه به جلو می‌رود.
Copy Icon JAVASCRIPT 
// Go back one page
history.back();

// Go forward one page
history.forward();

// Go back two pages in history
history.go(-2);

این مثال‌ها نحوه استفاده از متدهای شیء history برای پیمایش در تاریخچه کاربر را نشان می‌دهند. این متدها معمولاً در پاسخ به رویداد کلیک کاربر روی دکمه‌های سفارشی «بازگشت» یا «بعدی» در یک وب اپلیکیشن استفاده می‌شوند.

در این درس، با اشیاء location و history و نحوه استفاده از آن‌ها برای تحلیل و تغییر URL و پیمایش در تاریخچه مرورگر آشنا شدیم. این ابزارها برای ساخت صفحات وب دینامیک و مدیریت جریان حرکت کاربر ضروری هستند. در درس بعد، به سراغ اشیاء navigator و screen خواهیم رفت تا یاد بگیریم چطور اطلاعاتی درباره مرورگر کاربر (مانند نام، نسخه و موقعیت جغرافیایی) و مشخصات صفحه نمایش او به دست آوریم.

```