Building a To-Do List with Cloudflare Workers and KV

In this tutorial, we’ll build a todo list application in HTML, CSS and JavaScript, with a twist: all the data should be stored inside of the newly-launched Workers KV, and the application itself should be served directly from Cloudflare’s edge network, using Cloudflare Workers. The function will take in an argument, , which will populate the variable in the above code sample:

In , we can use the retrieved KV data to call the function, and generate a based on it:

The finished product looks something like this:

At this point, we’ve built a Cloudflare Worker that takes data from Cloudflare KV and renders a static page based on it. Instead, let’s just update the list of todos locally, by taking our original code for rendering the todo list, making it a re-usable function called , and calling it when the page loads and when the cache request has finished:

With the client-side code in place, deploying the new Worker should put all these pieces together.

Source: blog.cloudflare.com