Load more content from localstorage while scrolling the page down

Question

I have a list of 100+ posts stored in my localstorage. The method that i am using to load the content on the page is :

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        //load_the_posts_method()
    }
});

I want to load first 20 posts initially, and then next 20 posts upon scrolling down to the bottom of the page.

load_the_posts() {
      posts = localstorage.getItem('posts');
for(i=0 to i=posts.length){
       // load all the posts along with the buttons to create/delete/update post.
   }
}

Not sure how to update load_the_posts() method to work with scroll event for loading 20 pages at a time.