स्थान का उपयोग करना बंद कर दें।

कई वर्षों के लिए, स्थान.एक बैक / फॉरवर्ड बटन को काम करने के लिए AJAX एप्लिकेशन का एक तरीका रहा है और, उदाहरण के लिए, पसंदीदा में एक निश्चित पृष्ठ स्थिति जोड़ें और बाद में वापस लौटें।

अब जब एचटीएमएल 5 को आदर्श माना जाता है, तो इतिहास एपीआई पर अपना ध्यान केंद्रित करने और location.hash बारे में भूल जाने का समय है। एचटीएमएल 5 हिस्ट्री एपीआई को समझना आसान है और अगर आप एक अजाक्स एप्लिकेशन को अनुक्रमित करने के साथ काम कर रहे हैं (तो आपको # या # krakozyabra के बिना) URL को थोड़ा सा सुंदर बनाने की अनुमति देता है।

ब्राउज़र का समर्थन

बेशक, IE केवल 10 संस्करण के लिए अच्छे ब्राउज़रों के साथ पकड़ा। व्यक्तिगत रूप से, मैं अपनी परियोजनाओं में IE <= 9 उपयोगकर्ताओं का समर्थन नहीं करता, लेकिन इसका मतलब यह नहीं है कि आपके पास या तो आपके ग्राहक हैं या आप स्वयं के ग्राहक हैं :) किसी भी मामले में, पुराने ब्राउज़रों के लिए समर्थन जोड़ना कोई समस्या नहीं है, हैश-फ़ॉलबैक के साथ बड़ी संख्या में पुस्तकालय हैं। , उदाहरण के लिए एचटीएमएल 5 इतिहास एपीआई , लेखक द्वारा हैब्रहाब पर प्रस्तुत किया गया है।

कार्य सिद्धांत

मैं एक कोड की टिप्पणी में इतिहास एपीआई के पूरे सार का वर्णन कर सकता हूं:

 //  back/forward  window.onpopstate = function(event) { console.log("location: " + location.href + ", state: " + JSON.stringify(event.state)); }; //    history.pushState({page: 1}, "title 1", "?page=1"); history.pushState({page: 2}, "title 2", "?page=2"); //    history.replaceState({page: 3}, "title 3", "?page=3"); history.back(); // location: http://example.com/example.html?page=1, state: {"page":1} history.back(); // location: http://example.com/example.html, state: null history.go(2); // location: http://example.com/example.html?page=3, state: {"page":3} console.log(history.state) // Object {page: 3} 

खैर, वास्तव में आसान है? :) अब location.hash साथ काम करने के साथ अपने आप को या अपने सहयोगियों को यातना न दें। उनके पास एक योग्य उत्तराधिकारी है - एचटीएमएल 5 इतिहास एपीआई।