vue使用localStorage缓存数据

文章目录

封装localStorage

store.js

const STORAGE_KEY = 'tddos-vuejs'
export default {
  fetch: function () {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save:function (items) {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
  }
}

crud的页面

关键点: 使用watch监听数组
使用deep 深检查对象属性，
使用 :class控制样式
使用封装的Store.fetch 初始化显示 缓存的数据。

HelloWorld.Vue

<template>
  <div class="hello">
    <h2>Todos Again - vue.js</h2>
    <input type="text" placeholder="do what?" id="add-input" v-model="newItem" @keyup.enter="addNew"/>
    <ul>
      <li v-for="item in items"   :class="{selected: item.isSelected}" @click="item.isSelected = !item.isSelected">
        <h3>{{item.content}}</h3>
      </li>
    </ul>
  </div>

</template>

<script>import Store from '../store'

export default {
  name: 'HelloWorld',
  data () {
    return {
      newItem: '',
      items: Store.fetch()
    }
  },
  components: {
    
  },
  watch:{
    items: {
      handler:function (val,) {
        console.log(val, oldVal)
        Store.save(val)
      },
      deep: true
    }
  },
  methods: {
    addNew() {
      this.items.push({content:this.newItem, isSelected:false})
      this.newItem = ''
      console.log(this.items)
    }
  }
}</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.hello{
    display: flex;
    flex-direction: column;
  }
h1, h2 {
  font-weight: normal;
}
.selected{
  text-decoration: underline;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  /*display: inline-block;*/
  margin: 0 10px;
}
a {
  color: #42b983;
}</style>

---

完