title: Add localStorage to Vue JS 2 app
body: <p>I wanna add the localStorage to my shopping cart app in Vue JS 2 to save items in a cart when user reload the page and to save quantity of items, when user clicks on + or - buttons. How can I do that? I'm new in VueJS. Ihave tried to solve it by adding itemStorage.fetch() into shopping cart component, but it does not work.</p>
  
  <p>This is what I have so far. Unfortunately I didn't split it into smaller components :(</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const apiURL = 'https://api.myjson.com/bins/1etx1x';
  
  const STORAGE_KEY = 'vue-js-todo-P7oZi9sL'
  let itemStorage = {
    fetch: function() {
      let items = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
      return items;
    },
    save: function(items) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
      console.log('items saved')
    }
  }
  
  Vue.filter('addCurrency', val =&gt; val.toFixed(2) + ' $');
  
  Vue.component('shopping-cart', {
    props: ['items'],
    data: function() {
      return {
        //item: this.items
        item: itemStorage.fetch()
      };
    },
    watch: {
      items: {
        handler: function(items) {
          itemStorage.save(items);
        }
      }
    },
    computed: {
      total: function() {
        let total = 0;
        this.items.map(item =&gt; {
          total += (item.price * item.quantity);
        });
        return total;
      }
    },
    methods: {
      removeItem(index) {
        this.items.splice(index, 1)
      },
      addOne: item =&gt; {
        item.quantity++;
      },
      subtractOne: item =&gt; {
        item.quantity--;
      },
      removeAll() {
        return this.item.splice(0, this.item.length);
      }
    }
  });
  
  const vm = new Vue({
    el: '#shop',
    data: {
      cartItems: [],
      //items: [],
      items: itemStorage.fetch(),
      addToCartBtn: 'Add to cart',
      showCart: false,
      isInCart: 'In cart',
      search: '',
      sortType: 'sort',
      sortOptions: [{
          text: 'choose',
          value: 'sort'
        },
        {
          text: 'name',
          value: 'name'
        },
        {
          text: 'price',
          value: 'price'
        }
      ]
    },
    created: function() {
      this.fetchData();
    },
  
    computed: {
      products: function() {
        return this.items.filter(item =&gt; item.name.toLowerCase().indexOf(this.search.toLowerCase()) &gt;= 0);
      }
    },
    methods: {
      fetchData() {
        axios.get(apiURL)
          .then(resp =&gt; {
            this.items = resp.data
          })
          .catch(e =&gt; {
            this.errors.push(e)
          })
      },
      sortBy(sortKey) {
        this.items.sort((a, b) =&gt;
          (typeof a[sortKey] === 'string' || typeof b[sortKey] === 'string') ? a[sortKey].localeCompare(b[sortKey]) : a[sortKey] - b[sortKey]);
      },
      toggleCart: function() {
        this.showCart = !this.showCart;
      },
      addToCart(itemToAdd) {
        let found = false;
        this.showCart = true;
        this.cartItems.map(item =&gt; {
          if (item.id === itemToAdd.id) {
            found = true;
            item.quantity += itemToAdd.quantity;
          }
        });
        if (found === false) {
          this.cartItems.push(Vue.util.extend({}, itemToAdd));
        }
        itemToAdd.quantity = 1;
      },
      itemInCart(itemInCart) {
        let inCart = false;
        this.cartItems.map(item =&gt; {
          if (item.id === itemInCart.id) {
            inCart = true;
          }
        });
        if (inCart === false) {
          return this.isInCart;
  
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/axios@0.16.2/dist/axios.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>