9.3 Web Storage

Hi folks. In this lesson we're going to look at the Web Storage specification which is comprised of a couple of different types of storage, session storage and local storage. Traditionally our options for saving persistent data have been rather limited. We've been able to store a small amount of text in cookies, which are special text files created by the browser and stored locally on the user's machine. Session storage is used to store key-value pairs of data that persists while the window that store the data stays open. Local storage is the same except that the data persists between sessions and can be used to store data, for as long as the user chooses to keep it. A storage object created for a particular domain is scoped to that domain and any sub-domains. It can't be accessed from another domain storage area. Both of these different storage areas make use of the storage interface, and so share the same properties and methods, making them very easy to use. We can save much more data with the storage API than we ever could with cookies, and the interface is much easier and more pleasant to use. The session storage and local storage objects are both global, and so we can access them anywhere in our code. We can add a new item to either session or local storage using the setItem method. This method takes two parameters, which are the key for the item to be stored under and the value. Both of these should be in string formats. If we pass simple values to them, like numbers or booleans, these will be converted to strings automatically. We can see that the message returns undefined. However, if we look in the Applications tab, we can see the storage areas, and we can see that our test item has been set and it has the value true. If we refresh the page we can see that the data is persisted. So the data will still be there if we navigate through different pages in our own website. It will only get lost when we actually close the browser window. If we want to save complex data structures to operate on as objects later on, there is an easy solution. We just need to serialize the object to a string in JSON format using the JSON API. And we can see that we now have the complex object in JSON format in our storage area. When we want to work with this object again, on another page perhaps, we can pass it back into an object from the string using the JSON.parse method. To get an item from within a storage area, we use the getItem method, which only takes a single parameter. And that's the key that the data is stored under. If you go back to the console now. And we can see the JSON string that we like to work with, and obviously if we want to work with that as a proper JavaScript object, we can just call the JSON.parse method. If the key that we passed to the getItem method in order to get the data doesn't exist, the method will return null. If we want to see what the key is for an item at a particular index, we can use the key method. This method takes a simple integer as an argument which corresponds to the index of the key we want to retrieve. So, we can see that at index 0 which we passed to the key method, the name of the key there is testItem. So if we didn't know that was the name of the key, we could use that to find out and then access the data stored within it. To remove an item from either sessions storage or local storage, we need to use the removeItem method. We can see that this method also returns undefined. But if we go back to the Application tab in the browser, we can see that the key has been removed. So in this lesson, we looked at the simple storage API, which gives us session storage for persisting data across sessions. Or local storage for storing data permanently, or until the user chooses to delete it through the browsers interface. The examples in this lesson all revolve around session storage, but local storage is used in exactly the same way and shares the exact same API. So it's easy to mix and match different storage solutions for different situations. We saw how to add new items to storage using the setItem method or retrieve them again using the getItem method. We saw how to read key names of items in the storage object using the key method. And we learned that we can only store simple text strings. We learned that if we want to save complex object structures we need to convert them to JSON first. Lastly we saw how to remove single items with the removeItem method. In the next lesson we'll finish up this section and the entire course with a quick look at web workers. Thanks for watching.