Using Web Storage

While we agreed on not to use Web Storage when possible, we will make a quick sample to test it and to see the Quota estimation, and how it looks like from a debugging tool point of view.

Open Order.js, and add the following two methods:

    load: () => {
        if (localStorage.getItem('cm-cart')) {
            try {
                Order.cart = JSON.parse(localStorage.getItem('cm-cart'));                
                Order.render();
            } catch (e) {
                console.error("Data in Web Storage is corrupted");
            }
        }
    }
    save: () => {
        localStorage.setItem('cm-cart', JSON.stringify(Order.cart));
    }

Now call Order.load() when the page loads (use any event) and call Order.save() within Order.render;

Now follow the next steps

  1. Add data to the Cart
  2. Open DevTools and find Local Storage, verify the data was saved
  3. Refresh the page and go the the Order, check that the data is still there
  4. Check the Quota estimation usage data, if available in the browser; you will see that Local Storage typically doesn't count for Storage Quota.