Saving the state of the application
We have a pretty functional tasklist application now. We can add, remove, and move tasks around. We can even edit the name of an existing task. There's only one problem. Since we added all of these task elements to the DOM dynamically, they won't be there the next time the user comes back to the application. We need a way to save the tasklist, so the next time the user comes back to the application the tasks will still be there. Otherwise, what's the point?
HTML5 has just the thing for that-Web Storage. Web Storage is a new API in HTML5 that allows you to store information on the client. In the past, the only kind of storage available on the client was cookies. But cookies aren't a great way to store data on the client. They are limited to only a few kilobytes of data and are also included in HTTP requests, inflating their size.
Web Storage, on the other hand, allows us to save much more data (up to 5 MB in most browsers) and adds nothing to the HTTP requests. It consists of two global objects that have the same interface,
localStorage
and sessionStorage
. The only difference between the two is that data stored in sessionStorage
goes away when the browser is closed, while data stored in localStorage doesn't. Since we want to save application data between sessions we will only use localStorage.
Data is stored as key/value pairs. You can set values using the setItem() method and retrieve values using getItem() as follows:
localStorage.setItem("myKey", "myValue");
var value = localStorage.getItem("myKey") // returns "myValue"If you try to get a value using a key that doesn't exist in localStorage, it will return null. If you try to add a value to localStorage and there is not enough memory left, you will get a QUOTA_EXCEEDED_ERR exception.
There are a few limitations to localStorage:
- The user doesn't necessarily have access to anything stored there (although it can be accessed through the browser's developer tools).
- It is shared by all applications in a domain, so the storage limit is shared among all of your applications. This also means that all of your keys among all of your applications must be unique. If two applications use the same key they will end up overwriting each other's data.
- Both keys and values must be strings. If you want to store something that is not a string, you must convert it to a string first. When you pull that value out of storage you must convert it back from a string to the type you're expecting.
Fortunately for us, JavaScript has a utility object called JSON that provides functions to convert values to and from strings. JSON stands for JavaScript Object Notation and is the standard for representing values as strings in a readable format. It is a subset of object literal notation in JavaScript, so if you know how to define object literals you know JSON. The JSON object has two methods; JSON.stringify() to convert a value to a string, and JSON.parse() to convert a string back into a value.
