Convince a browser to cache a DOM altered by JavaScript

I have a web app, on the front page of which there is a login form. When the login form is submitted, some JavaScript jiggery-pokery happens behind the scenes and the user's 开发者_运维技巧data appears -- without a pageload.

The problem is that when the user navigates away from the page, then uses the back button to navigate back, the page is in its original, non-logged-in state. Can I have the browser cache the altered DOM?

You could try using a plugin like this one: http://benalman.com/projects/jquery-bbq-plugin/

You have to generate a #logged link into your url, when you click on history back you just have to re-request the user information.

Hope this helps.

I would venture to guess that instead of hacking something together that stores user login data on the client (which is a bad idea anyway), something along these lines would be a much better idea:

1. Fix the "jiggery-pokery" so that it's not broken.

   • What I mean is: it's not REALLY logging the users in, it's just giving them the illusion of being logged in
   • So you need to change it so that it stores some piece of information (probably in the session) that verifies that they are logged in.

2. Once the jiggery-pokery is fixed, your page can do a check for that piece of info and present the "logged in" DOM.

   • If they're not logged in, it still uses the old JS method to show the original, log them in, and update the DOM (the first time).

Make sense?

Current flow:

1. Visit site

2. JS login

3. Update DOM

New Flow:

1. Visit Site

2. Check if logged in

3. Present appropriate DOM

4. JS Login

5. Backend stores login info

6. JS updates DOM.