How to save the entire state of a web application

Hi, I have been coding a finance web app with html, css and javascript. Here is my codepen http://codepen.io/JennySwift/pen/gcvuL.

There's a lot of code there, so I don't expect you to read it all, but I think being able to see the application might help you to see what I am trying to achieve.

My question is this: I have been trying to figure out how to save the entire state of the application so that if I close and reopen the page, or refresh the page, it is the same as I left it. I have looked into html local storage but ideally I would like something that can be used on multiple devices. I have learned some php and a bit about mysql and a bit of ajax and watched the video here https://teamtreehouse.com/forum/more-phpjquery-projects about using php with ajax. But still I don't understand how I can save the state of my application. I'm thinking I need to be able to send my javascript variables to a php file with ajax, and then add them to a database from the php, but perhaps I'm mistaken. I'm having trouble finding tutorials specifically addressing my question of saving the state of the application, as well as somehow sending things that are added to the page by the user into a database and then retrieving that data on page refresh. I have completed more than half of both 'database foundations', and 'using php with mysql', and I have finished all of 'build a simple php application', but none of these, nor 'enhancing a simple php application', look like they are going to show me the answer to my question.

I would have thought that learning how to save the state of a web application would be a popular topic to learn, and easy to find a tutorial about, because web apps are so common, and who wants to lose their data? But it surprises me it's hard to find. Maybe I'm missing something?

Anyway, can anyone please point me in the right direction of what I need to study, or resources where I can find answers to these things, or perhaps show me the code I would need in my app to prevent me losing my data on page refresh?

In case saving the entire state of the application isn't possible and I need to somehow do it individually for each piece of data, examples of those pieces of data I would want to save are:

When the user clicks on either 'new expense' or 'new income', and enters values into the inputs, I would want to keep those values, and then when the page is refreshed, I'm guessing I would somehow add all those inputs to the page with their corresponding values.

When the user adds categories, to save them, and once again, have them still there on page refresh.

Likewise when the user enters a budget.

And I would want the numbers on the left to be the same on page refresh as they were, i.e income, expenses, balance, etc. These numbers are the values of my javascript variables returned within my function.

And I would also want the page to remember after page refresh whether the expense or income was given the class 'reconciled', and if yes, for its reconciled box (the box with the capital R) to still be green on page refresh.