Remember loaded elements with AJAX?

Question

I have a full AJAX website. On a page with 12 elements and a homemade infinite scroll (just a "more" link at the bottom of the page, loading the 12 next elements), when I click on one of these links, it loads the page.

The problem

When I want to come back to the list (browser's previous or close link) and if I loaded more than 12 photos (all, for example), I lose the loaded elements and I need to scroll to the bottom of the page… load another elements… click on it… load the page… go back, etc.

Do you know what can I do to avoid this behavior and keep the loaded elements progression?

My test

I tested something. I define a variable with the base loaded elements and I compare it with the new loaded elements, then it runs something if the last value is higher than the new one.

last = $(".grid.photos article").length;

var newelems = $(data).find(".grid.photos article").length,
    perpage = 12,
    diff = last - newelems;

if (last > newelems){
    var times = Math.ceil(diff / perpage);
    // DO SOMETHING MAGIC
}

That's the default behavior of the page if you want to retain a certain information in the page even closing the browser, you can use cookies — Drixson Oseña, Jan 15 '14 at 01:36
You can use cookies or [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage). — , Jan 15 '14 at 01:41
I thought to do a click's trigger as many time as necessary (via the variable `times`) to reload elements and keep the position but I don't know if it's a good solution… — flks, Jan 15 '14 at 01:46
Note that you have a size limit using cookies or local/session storage. If your whole site uses AJAX, how about you load clicked items in a modal window without reloading the page? If so, look at [this](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page). Also make sure to let your users access those individual pages with regular links. — grim, Jan 15 '14 at 01:52

score 0 · Answer 1 · answered Jan 15 '14 at 01:55

What about adding hash to the location so there is an actual url associated with each state. For example

 window.location.hash = 'load12';

then you could build logic off of that hash to see what needs to be loaded. Another idea is to work with HTML5 pushState.

score 0 · Accepted Answer · answered Jan 15 '14 at 02:14

I found another solution (working!) which plays with a parameter in the url.

PHP (Wordpress)

$perpage = ($_GET["last"]) ? $_GET["last"] : 6;

...

"posts_per_page" => $perpage

jQuery

// Set last position for photos list
last = $(".grid.photos article").length;

// Retrieve the position
if (last > 6)
    url += "?last=" + last;

Remember loaded elements with AJAX?

The problem

My test

2 Answers2

PHP (Wordpress)

jQuery