Data

The goal is to make it as easy and fluid as possible to capture and reuse data as part of building a prototype.

This approach uses the localStorage feature of the browser.

Saving data

To save data, just add this line at the bottom of a content page that has inputs on it (like text inputs, radio buttons, etc.): {% include actions/save-data.html %}

This will automatically save any entered data any time you "unfocus" on an input. You don't have to take any other actions to save the data, but keep in mind this also means it's very easy to change the data.

The data is saved using a "key/value" pair. The key is the name of the piece of data. The value is the data entered in the input.

The key is named automatically based on the page name and the name of the input, like this: page-name-input-name.

Retrieving saved data

To use saved data on a page, add this line where you want it to appear: {% include actions/get-data.html get-this="page-name-input-name" %}.

It will show up on the page inside a p (paragraph) element.

If you want the data to show up inside an input, you can add the setting put-it-here, like this: {% include actions/get-data.html get-this="page-name-input-name" put-it-here="input-id-based-on-label" %}.

The id of the input where you want to enter saved data is based on its label. So if the label is Full name, the id will be full-name.

Reviewing and clearing data

To see all the data you have saved for a particular prototype, you can go to this page: /docs/data.html.

You have the option here to clear out all the data to reset the prototype.