How to save/cache the dom so that the page loads as-is when you hit the back button?

Question

i add models to my js app model collection using ajax calls. when i click a model and go to the next page, i want all the models i had loaded to still be there when i hit the back button. what is the best way to do this so that it works on all browsers? this is for mobile web. i can't find a straight answer, how do i use bfcache, or js history, or is there another, better way?

At least firefox actually restores the page verbatim (DOM and javascript state) if it's still in the bfcache, unless that has been suppressed by certain event handlers. — the8472, Oct 31 '16 at 16:03
i don't think anyone will be using FF on mobile though, trying to get this to work on safari and chrome mostly for ios and android mobile web users — Pat O'Keefe, Oct 31 '16 at 16:26

O_Z · Answer 1 · 2016-10-31T20:13:44.427

0

You can store them in the local Storage and ajax for them only if the do not exist on the local Storage

So instead of using the regular $.ajax , use this for the ajax that you want cached:

function storageBasedAjax(url,cb){

    if (localStorage.getItem("myAxaxCache_"+url)){
      cb(localStorage.getItem("myAxaxCache_"+url));
      return;
    }       

   $.ajax({url: url, success: function(result){
     localStorage.setItem("myAxaxCache_"+url,result);
        cb(result);
   }});
}

Just remember you do not want to over load, so if you have a url with a parameter changing each call,do not use this or you will overload the local storage

edited Oct 31 '16 at 20:13

answered Oct 31 '16 at 15:34

O_Z

1,515
9
11

I'm pretty sure the browser doesn't save Ajax content when using back button by default. – andreini Oct 31 '16 at 15:38
It saves it on cash, not related to back button. – O_Z Oct 31 '16 at 15:39
browser currently doesnt save anything on mobile safari on ios – Pat O'Keefe Oct 31 '16 at 16:27
@PatO'Keefe I said might. Anyway my main solution is local storage and it's a good one. – O_Z Oct 31 '16 at 16:30
what is the best way to save the dom to local storage? @O_Z i didnt down vote – Pat O'Keefe Oct 31 '16 at 16:34
@PatO'Keefe I think you should only save your ajax results and re-render. On your ajax function just check the storage and if it's there just return it and do not do the ajax.It will be very fast – O_Z Oct 31 '16 at 16:40
@O_Z do you mean using hmtl localStorage? or something else? also thank you very much for the responses – Pat O'Keefe Oct 31 '16 at 17:19
@PatO'Keefe i will write it soon in my post. – O_Z Oct 31 '16 at 19:54
@PatO'Keefe check my code, I tested it, it works.An up vote will be nice – O_Z Oct 31 '16 at 20:16
@O_Z i tried to upvote but i have less than 15 reputation so it says it won't publicly display i'm sorry :(((((( but thank you very much i will see if that works! – Pat O'Keefe Nov 02 '16 at 17:09
i cant figure out what that code means, i'm going to look into history.js and pushstate popstate etc – Pat O'Keefe Nov 02 '16 at 17:29

How to save/cache the dom so that the page loads as-is when you hit the back button?

1 Answers1