Serializing and deserializing cookies

Despite all the advances made in HTML5, browsers still have a very strange cookie API. The way it works is error-prone and inconsistent with the normal semantics of JavaScript.

The global document object has a cookie property, if a string is assigned to it, it magically adds the specified cookie to the list of cookies. When an attempt to read the cookie is made, a different value containing all the cookies is returned.

This API is not very useful without a wrapper. In this recipe, we're going to wrap this API in a wrapper that actually makes sense. We're going to test this wrapper by making a form page that saves itself on every modification (preserving the data after a page reload) for two minutes.

Getting ready

Let's find out how document.cookie works. We can set a cookie as follows:

document.cookie = "name=test; expires=Fri, 18 Jan 2023 00:00:00 GMT; path=/";

This sets a cookie for the whole domain of the current website called test, expiring on January...