vue使用localStorage缓存数据

ゝ一纸荒年。 2022-12-15 03:21 196阅读 0赞

### 文章目录 ###

*  封装localStorage
 *  crud的页面

# 封装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, oldVal) { 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>
    
    
    <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>

--------------------

完