1

I'm a computer science tutor, with a lot of experience teaching Python and Java but without a lot of web experience. I'm now working with a high school student who has been assigned a project that he wishes to implement in HTML and JS. So this is a good chance for me to learn more about this type of application.

It's an application for taking food orders on the web and showing an illustration of your order. You choose a main dish and any custom alterations. Then you choose another course of the meal, maybe a salad and any alterations. And so on. The first page it shows you will show an empty plate. You choose a course to customize and it will take you to a page that shows options, then another page with further options, and so forth. Each time you are finished configuring an option, it will take you back to the starting page and show a picture of the meal so far on the plate (which was formerly empty).

The main part I'm unfamiliar with is handling persistent state. Although each page will have a unique structure of images (possibly a canvas) and buttons, it will have to remember the order as configured as it loads each page.

I'm wondering what a simple way of handling this is. This is a high school student with very little prior programming experience, and I'm allowed to help her, but it has to be within her grasp to understand overall.

Perhaps sessionStorage is the best bet?

Regarding possible duplication of Persist variables between page loads, my needs are a lot more complex than that question--I need to store more than a single global variable, and I may need a framework to simplify this. In particular, I'm interested in doing this a way that is simple enough for a high school student to understand so that he can implement some of it himself (at least some of it has to be his own work). I don't know if using a framework will make the job simpler (that would be good) or whether it will require more effort to understand the framework (especially relative to an inexperienced student -- not good).

composerMike
  • 966
  • 1
  • 13
  • 30
  • 2
    Sure, `sessionStorage` might be just fine, or `localStorage` for more persistence – CertainPerformance Feb 04 '19 at 08:24
  • Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) –  Feb 04 '19 at 08:25
  • redux is a good library for managing state, but it might be an overkill in your case. People usually use it with react. The kind of website you are trying to make will be too complicated for plain js, you should use some framework like react, it will make things much easier. – Vaibhav Vishal Feb 04 '19 at 08:35
  • I'm not sure I see the point of your edit. The accepted answer shows how to store and retrieve a data structure of arbitrary complexity, not just a single value. I don't see what problem introducing a framework is going to solve. – Alohci Feb 04 '19 at 23:28
  • I was given a request to explain the difference from the other question, so I did. There's no implication that it hasn't been answered already. @VaibhavVishal suggested a framework. – composerMike Feb 05 '19 at 09:12
  • [react](https://reactjs.org/) is very simple to understand, someone who already knows js should be able to able understand the basics of react in 1-2 days. [redux](https://redux.js.org/) is a bit more complicated to understand at first, once you get the hang of it(took me 1-2 weeks), then it's good. IMO you should use react. Give redux a try, if it feels complicated, leave it. The kind of app are trying to do, with plain js, it will take you too long. react will certainly speed up the process – Vaibhav Vishal Feb 05 '19 at 09:20

1 Answers1

2

Perhaps sessionStorage is the best bet?

If you want the state to be automatically expired when the browser session ends. Otherwise, use localStorage, which will persist longer than that.

It's important to remember that web storage (both sessionStorage and localStorage) only stores strings, so a common technique is to use it to store JSON that you parse on load, so you can have complex state. E.g.:

// On load
var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {
    // None was stored, create some
    state = {/*...default state...*/};
}

// On save
localStorage.setItem("state-key", JSON.stringify(state));

Note that this bit:

var state = JSON.parse(localStorage.getItem("state-key"));
if (!state) {

relies on the fact that getItem returns null if there is no stored data with that key, and JSON.parse coerces its argument to string. null coerces to "null" which will be parsed back into null. :-)

Another way to do it is to use ||:

var state = JSON.parse(localStorage.getItem("state-key")) || {
    // default state here
};
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875