Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

CodePen doesn’t have an official way to store data that is attached to the Pen. We do offer Asset Hosting, which could easily be editable .json files, but that would largely be read-only. We don’t have a programmatic way to write data to assets.

But there are ways! There are services out that have JSON stores for us to use as we need. Remember Webtask? We talked about it earlier this week when we built a custom HTML preprocessor. Webtask has a 500KB JSON store for every task you build which provides both read and write APIs!

Let’s have the simplest little peice of JSON ever, just a saved color:

{
  "color": "#e6e300"
}

To GET that data out of Webtask, we’d create a function in Webtask that uses their special API for accessing it, and return it in the callback:

module.exports = function(ctx, cb) {
   ctx.storage.get(function (error, data) {
      if (error) return cb(error);
      cb(null, data);
   });
}

We can test it right within Webtask and we’ll see our response:

So now, in a Pen, we could Ajax for that data:

fetch(WEBTASK_URL)
    .then(response => response.json())
    .then(data => {
      // Use the JSON data!
      document.body.style.backgroundColor = data.color;
    });

But getting data is often the easy part. Webtask allows us to write data back, which is extra cool! In this case, we’re not going to save anything mission critical or sensitive. If you are, you should look into authentication in conjunction with all this.

I’m going to rejigger our Webtask function to work two ways, either a simple GET request without any URL parameters will just return the data in the store. Or if you pass URL parameters, it will overwrite the data in the store.

module.exports = function(ctx, cb) {

 if (Object.keys(ctx.query).length !== 0) {
   ctx.storage.set(ctx.query, { force: 1 }, function (error) {
      if (error) return cb(error);
      cb(null, { 
        "message": "success" ,
        "color": ctx.query.color
      });
   });
 } else {
   ctx.storage.get(function (error, data) {
      if (error) return cb(error);
      cb(null, data);
   });
 }

}

In a more serious environment, you’d probably set up an Express server and have differnt URL endpoints you POST to and such, but this is just a little nothing demo to acquaint you.

Here’s a Pen that:

1. Loads the color from the JSON store when the Pen starts up
2. If you choose a new color, it saves that color to the JSON store.

So if you refresh the page, that color will persist. Keep in mind this is a public demo, so if someone else is also viewing it, you might get the color that they set.

See the Pen Save Favorite Color by Chris Coyier (@chriscoyier) on CodePen.

Other Options!

Check out Airtable. Here’s an article on using it entirely client-side. But more likely you’d use Node.js to interact with it (to protect your API keys), which you could do with Webtask. Here’s an article by Flavio Copes on using it as well.

Fieldbook is in that same ballpark.

And another! n:point!

I haven’t actually played with this one yet, but it looks pretty cool. I’m not entirely sure it has write access those. It’s listed as a premium feature but it’s not entirely clear how to get premium.