How do I save an infinite stack of AJAX content when a user leaves the page?

Question

I'm making a website with infinite scrolling. That is, as the user scrolls to the bottom of the page, a new block of content is appended to the bottom. It's very similar to Facebook. Here's an example of 3 pages loaded:

 _________
|         |
|    0    |
|_________|
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|

When the user clicks something on the last page, I take them to a separate detail page. But if the user clicks back to the search results page, I have no memory of their previous location and must load page 0 again.

 _________
|         |
|    0    |
|_________|

I know of some old-school methods to solve this, but they each have some serious problems:

Hash URL

I could update the URL every time a new page is loaded. For example: www.website.com/page#2. When the user goes to the detail page and back, the URL tells me the last loaded page, so I load it for him:

 _________
|         |
|    2    |
|_________|

But this is poor user experience. Only page 2 is loaded. The user cannot scroll up to see older content. I can't just load pages 0, 1, and 2 because that would overload the server, considering that the back button accounts for 50% of web traffic (Jacob Nielsen study).

Local Storage

Cookies don't have the storage capacity to store many pages of data. Local Storage should have sufficient space. One idea is to store all the loaded pages into Local Storage. When the user goes back to the search results, I load from local storage instead of hitting the server. The problem with this approach is that a large chunk of my users are on browsers that don't support local storage (IE7).

Barrack

Why would loading all the pages you have displayed at once overload the server when requesting them 1 at a time wouldnt? – Mauri

…with an infinite amount of memory. – Bremer

@Mauri : I worded my thought incorrectly. I mean loading a hundred pages all at once is slow for the user and places unnecessary burden on the server. – Barrack

Answer 1

Given the constraints of your problem the only plausible solution I can think of would be to cache the heights of the previous pages and then load them if the user scrolls up. This would pad your upward scrolling and allow you to trigger a load if the user looks up. Additionally if you wanted to get a little more fancy I'd try to figure out a way to freeze the scrollbar in order to prevent the user from scrolling up past the previous unloaded page. This way they wouldn't be able to trigger multiple page loads at a time.

Talented

Answer 2

Instead of taking the user to a separate detail page entirely, instead why not just hide the main scrolling content, load the detail content via Ajax / XMLHttpRequest() and then make visible that content? In other words, like how Facebook does it. I suppose whether you can do this depends on what the content is and whether it's something you're designing and controlling, or if it's something external.

Evite

You can even change the url and handle the back button by using history.pushState and window.onpopstate :-) – Disaffiliate

@Rocket: That's very interesting and I had no idea about that. That's something that a project of my own, which entirely uses Ajax to manipulate lots of content within a single page, would really benefit from. Many thanks for sharing. – Evite

The detail page is out of my control. I must go to a new physical page. – Barrack