The next type of storage we will look at is a relatively recent addition to the browser toolset. It's called local storage, and it's been around for a while. You can add items to it as follows:
localStorage.setItem("pages", "all_the_pages");It's simpler than cookies to read items from:
localStorage.getItem("pages");This will persist the data beyond page reloads or the browser closing. You can store considerably more data than in cookies (anywhere from 3 MB to 10 MB, by default), and the interface is easier to use.
So, how can we use this to store our pages? Let's abstract local storage a bit:
export default {
"get": function(key, defaultValue) {
var value = window.localStorage.getItem(key);
var decoded = JSON.parse(value);
if (decoded) {
return decoded;
}
return defaultValue;
},
"set": function(key, value) {
window.localStorage.setItem(
key, JSON.stringify(value)
);
...