2

I am relatively new to web development. If you are creating a front-end JS application, is it always the case that a page refresh incurs a new JavaScript program? Is it possible to keep the same JavaScript runtime going during a page reload? I know there are many solutions to persist the data on the front-end before/during/after page reloads...but what about the entire front-end program? I know single-page-applications are a solution to this, but I am specifically curious about maintaining the same JavaScript runtime after a page reload/refresh.

It seems that with HTML5 apps like Chrome Apps or Cordova apps, this is doesn't require page refreshes because they are not used in a browser. That being said, why isn't it possible to disable page refreshes or find a way to not have to reload a front-end JS program when someone visits your website and (accidentally) refreshes the page etc?

Alexander Mills
  • 90,741
  • 139
  • 482
  • 817
  • 1
    It's very likely that this question gets closed as it is too broad, but here is a useful question that may give you more info for you to formulate more specific questions. http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload – Chubas Jun 12 '15 at 21:42

2 Answers2

2

Yeah, every refresh starts you with a new js environment. Browsers are pretty fast, it usually takes longer downloading the application scripts than running js code. Save data somewhere and cache your scripts, it will feel snappy.

Some helpful things to learn about:

  • pushState and popState (simulate changing pages for single-page-apps)
  • localStorage (save data between page load)
  • beforeunload, unload, and close window events
  • app platform (Firebase, Parse)
  • server and db framework (see Ruby On Rails, Node.js, etc)
AJcodez
  • 31,780
  • 20
  • 84
  • 118
  • 1
    This is probably the best answer to such a general question without a specific use case. Might also list query and hash strings as another way of persisting state. – Yogi Jun 12 '15 at 20:09
1

You can do it using local storage. You run an initialization, which is either the first initialization, or state load. While Javascript is running, save every state changes. When the page reloads, you will load the state back and work as if page load did not happen.

Read about local storage here.

You can also store the state on the server. Basically Javascript runs again and again upon page load, but you can control how it runs and you can persist the state.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • thanks, yeah I was wondering if I could keep the same JS runtime going even during a page refresh. but yes, using front-end storage is a good feature to not have to entirely reload state from the server. – Alexander Mills Jun 13 '15 at 20:03