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).

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.