Front-end JavaScript program

Question

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?

Answer 1

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)

Answer 2

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.