Skip to content

Data

Jump to bottom
Philip Levy edited this page Feb 22, 2022 · 6 revisions

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 to the "front matter" settings at the top of a content page that has inputs on it (like text inputs, radio buttons, etc.): save-data: true. (This works too: save-data: yes, please.) It will look something like this:

---
layout: default
header: true
save-data: true
---

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 put 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.

Included data files

These are the data files that are included in the project, either as part of the template examples or documentation.

Clone this wiki locally