vue使用localStorage缓存数据

简介: 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, 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>
<!-- 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>

相关文章
|
4天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
32 5
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
9 1
|
6天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
11天前
|
JavaScript
|
12天前
|
存储 缓存 NoSQL
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
|
12天前
|
缓存 NoSQL 中间件
应对数据库不断膨胀的数据:缓存和队列中间件
【6月更文挑战第5天】该文探讨了优化数据库使用以提升应用系统性能的策略。文中建议利用Redis缓存和MQ消息队列作为辅助工具,以进一步优化性能和减少资源消耗。
14 2
应对数据库不断膨胀的数据:缓存和队列中间件
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
11 0
|
17天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
13 1
|
20天前
|
JavaScript Java 测试技术
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 0
|
28天前
|
消息中间件 缓存 监控
中间件如果缓存中存在所需的数据(缓存命中)
【5月更文挑战第12天】中间件如果缓存中存在所需的数据(缓存命中)
35 3