مدیریت دکمه ی Back مرورگر توسط جاوا اسکریپت

var times = 0;
function doclick() {
    times++;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

<div onclick="doclick();">Click Me</div>
<div id="message">Recorded <b>0</b> clicks</div>

1. کاربر تصمیم میگیرد که از اپلیکیشن شما استفاده کند.
2. کاربر از طریق تایپ کردن آدرس شما در url یا کلیک کردن یک لینک درون ایمیل خود وارد صفحه ی شما میشود.
3. کاربر مدت کوتاهی از اپلیکیشن شما استفاده میکند و احساس خوبی پیدا میکند و از نشان دادن اطلاعات چندین مرحله سپری میشود.
4. کاربر تصمیم میگیرد یک مرحله به عقب برگردد، روی دکمه ی "برگشت" کلیک میکند و این لحظه فاجعه رخ میدهد، کاربر بجای اینکه یک مرحله به عقب برگردد کلا به صفحه ی قبلی برمیگردد.

function doclick() {
    times++;
    location.hash = times;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

1. کاربر به Click Me میرسد.
2. قسمت url با هر کلیک کاربر آپدیت میشود، با هر کلیک "#" به انتهای url اضافه میشود.
3. با کلیک روی دکمه ی back کاربر برای مثال به #2 برمیگردد و از این طریق کاربر به مرحله ی قبلی برمیگردد بدون اینکه کاملا به صفحه ی قبلی برگردد.

آپدیت کردن وضعیت صفحه

function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {       
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
    document.getElementById('message').innerHTML =      
        'Recorded <b>' + times + '</b> clicks';
}

1. URL با کلیک کاربر آپدیت میشود.
2. زمانی که کاربر روی دکمه ی "برگشت" کلیک کند، تابع onchashchange صدا زده میشود و وضعیت صفحه با URL هماهنگ میشود.

استفاده از LOCATION.HASH

نتیجه گیری