Backbone was mainly designed to work with RESTful API servers; however, you don't want to always store the data in a server for offline applications or to bust application loading storing cache data in the browser.
We have two choices to store data in the user browser: use localStorage or the new IndexedDB API. While localStorage has wide support on major browsers, IndexedDB is the new specification that is yet to be supported in the near future. Another option that is available currently; however, in deprecated status is Web SQL. If you are developing modern web applications, you should avoid using Web SQL.
In this chapter, you will learn the following topics:
- Basics of localStorage
- Basics of IndexedDB
- Using localStorage instead of a RESTful server to store information
- Using IndexedDB instead of a RESTful server to store information
The localStorage is the simplest and the most supported browser data store. At the moment of writing this book, it is supported in almost all the major browsers. As shown in the figure below, the only browser that does not support localStorage is Opera Mini:
Figure 6.1 Browser support of localStorage
The localStorage is a simple key/value database that is able to only store text. In localStorage, you have three main methods to access the data: setItem(), getItem(),and removeItem(). With these three functions, you can manage the data in the store pretty well.
The downside of localStorage is that it does not have tables or collections, therefore, all the data is mixed; another issue with localStorage is that it is limited to 5 Mb of information. If your storage requirements are bigger than that, you will need IndexedDB.
To store the data in the localStorage store, you need to call the setItem() method in the localStorage global object:
localStorage.setItem('myKey', 'myValue');
localStorage.setItem('name', 'John Doe');That's it, this would store the information in the browser. We can explore the result of these instructions in Google Chrome as seen in the following figure:
Figure 6.2 Google Chrome and localStorage
The data stored in localStorage is organized by site, which means that can you can only access the data stored on your site. In the above figure, you can see the available sites (http://localhost:4000) on the left-hand side. On the right-hand side, you can explore the data that we have stored with the setItem() method for the given site.
To retrieve the information from localStorage, you have to use the getItem() method:
localStorage.getItem('myKey'); // myValue
localStorage.getItem('name'); // John Doe
localStorage.getItem('notExists'); // nullTo delete an item from the store, we can use the removeItem() method:
localStorage.removeItem('name');
localStorage.getItem('name'); // nullAs mentioned earlier, localStorage only stores strings on it. However, we want to store objects, how do we do that?
varmyObj = {name: 'John Doe', age: 26};
localStorage.setItem('object', myObj);
localStorage.getItem('object'); // [Object object]Oops…that's not what we expected. The localStorage automatically converts the object into string before storing the object. You can serialize objects with the JSON.stringify() function so that localStorage receives a string instead of an object:
varmyObj = {name: 'John Doe', age: 26};
var serialized = JSON.stringify(myObj);
localStorage.setItem('object', serialized);To get the stored object back, you can use the JSON.parse() inverse function that converts a string into an object:
var data = localStorage.getItem('object');
varobj = JSON.parse(data);This is how you can store and retrieve objects from localStorage. You will need to encode and decode objects as you go. It is not recommended to store big objects in localStorage due to the heavy use of JSON functions; every time you encode or decode an object, the JavaScript thread will block that object.