文档章节

Vue 中如何用localStorage来存储

乱世中的单纯
 乱世中的单纯
发布于 2017/08/24 11:40
字数 405
阅读 3360
收藏 1

在写个list的小demo时,经常会遇到下面这个问题

当刷新后,下面的list就都不见了。因此可以用localStorage。localStorage就是用来本地存储数据的。先看下完整的代码:

vue文件:

<template>
  <div id="app">
    <h2 v-text="title"></h2>
    <input type="text" v-model="newItem" v-on:keyup.enter="addNew"/>
    <ul>
      <li v-for="item in items" v-on:click="toggleFinish(item)" v-bind:class="{finished:item.isFinished}">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
import Store from './store.js'
console.log(Store)
export default {
  data:function(){
    return{
      items:Store.fetch(),
      title:"to do a list",
      newItem:''

    }
  },
  watch:{
    items:{
      handler:function(items){
        Store.save(items)
      },
      deep:true//深复制
    }
  },
  methods:{
    toggleFinish:function(item){
      item.isFinished=!item.isFinished
    },
    addNew:function(){
      this.items.push({
        label:this.newItem,
        isFinished:false
      })
      this.newItem=''
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.finished{
  text-decoration:underline;
}
</style>

store.js文件

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

结果:

具体关键点如下:

1、通常新输入的数据要先保存在本地,然后刷新时,要从本地读取新数据,所以store.js文件中一个fecth读取数据函数,一个save保存数据函数。

2、store.js写好后,要引入该js文件

3、用watch来监听输入数据的变化,有变化时就调用save函数保存变化

其中deep:true是深复制,就是不仅是数据,连其状态什么的都一块复制了,如例子中的isFinished就复制了

4、到这里只是保存了新添加的数据在本地,但是还需要读取出来

调用fetch函数就可以吧新数据读取出来。

© 著作权归作者所有

乱世中的单纯
粉丝 13
博文 66
码字总数 37214
作品 0
广州
程序员
私信 提问
Vue2.0学习(三)--Vue数据通信详解

一、前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据...

人心思动
2018/08/09
0
0
基于localStorage实现一个具有过期时间的DAO库

本文主要解决原生localStorage无法设置过期时间的问题,并通过封装,来实现一个操作便捷,功能强大的localStorage库,关于库封装的一些基本思路和模式,我将采用之前写的如何用不到200行代码...

徐小夕
07/11
0
0
vue服务器端渲染(SSR)实战

什么是服务端渲染(SSR)? SSR(Server-Side Rendering),在SPA(Single-Page Application)出现之前,网页就是在服务端渲染的。服务器接收到客户端请求后,将数据和模板拼接成完整的页面响应到客...

小铭星
2018/07/12
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0
Avue 1.0 发布了,像 easyUI 一样写 vue

vue1.0发布了,像easyUI一样写vue 欢迎点击演示地址体验 演示地址:http://122.4.205.228:7777——jenkins+docker+git钩子自动部署 码云地址:https://gitee.com/smallweigit/avue github地址:...

avue_smallwei
2018/03/15
16.5K
25

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部