Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Jenny Swift
Jenny Swift
21,999 Points

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.

1 Answer

Sean T. Unwin
Sean T. Unwin
28,660 Points

If you wanted offline capability then you could use cookies, localStorage, or IndexedDB, and hopefully in the near future the File API will get more traction. This article has a brief overview of those.

If it`s strictly online then you could go with a server-side db such as mySQL and similar, or something like MongoDB.

I suppose if you did not want to go heavily with server-side scripts and such, you could save pertinent information in JSON files on the server, but that could lead to a lot of overhead in the way of file size, number of files and speed of accessibility, not to mention creating an engine to iterate through data, save and delete data, etc..