Local Storage Example

by Alicia Sykes

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <h1>Local Storage Example</h1>
  <p>Current Layout is: {{ layout }}</p>
  <button  @click="setLayoutOrientation('grid')">Grid Layout</button>
  <button  @click="setLayoutOrientation('row')">Row Layout</button>
  <button  @click="setLayoutOrientation('column')">Row Layout</button>
</div>

JavaScript

var demo = new Vue({
  el: '#demo',
  name: 'example',
  data: () => ({
    layout: this.layoutOrientation,
  }),
  computed: {
    layoutOrientation: {
      get: () => localStorage.layoutOrientation || 'grid',
      set: function setLayout(layout) {
        localStorage.setItem('layoutOrientation', layout);
        this.layout = layout;
      },
    },
  },
  methods: {
    setLayoutOrientation(layout) {
      this.layoutOrientation = layout;
    },
  },
  mounted() {
    this.layout = this.layoutOrientation;
  },
})