一.添加缓存数据
//执行缓存数据localStorage.setItem('todolist',JSON.stringify(tempList)); 二.页面加载的时候加载数据
生命周期函数（页面加载的时候就会触发）
//生命周期函数 页面加载就会触发 componentDidMount(){ //获取缓存的数据 var todolist=JSON.parse(localStorage.getItem('todolist')); /*字符串*/ if(todolist){ this.setState({ list:todolist }) } }
完整代码
import React,{Component} from 'react';import '../assets/css/index.css';class Todolist extends Component { constructor(props) { super(props); this.state = { list:[ // { // title:'录制ionic', // checked:true // }, // { // title:'录制nodejs', // checked:false // } // , // { // title:'录制egg.js', // checked:true // } , // { // title:'录制vue', // checked:false // } ] }; } addData=(e)=>{ //按下回车的时候在增加 if(e.keyCode==13){ // alert(title); let title=this.refs.title.value; let tempList=this.state.list; tempList.push({ title:title, checked:false }) //改变后的值赋值给list this.setState({ list:tempList }) //表单置为空 this.refs.title.value=''; //执行缓存数据 localStorage.setItem('todolist',JSON.stringify(tempList)); } } checkboxChage=(key)=>{ // alert('111'); let tempList=this.state.list; tempList[key].checked=!tempList[key].checked; this.setState({ list:tempList }) //执行缓存数据 localStorage.setItem('todolist',JSON.stringify(tempList)); } removeData=(key)=>{ let tempList=this.state.list; tempList.splice(key,1); this.setState({ list:tempList }) //执行缓存数据 localStorage.setItem('todolist',JSON.stringify(tempList)); } //生命周期函数 页面加载就会触发 componentDidMount(){ //获取缓存的数据 var todolist=JSON.parse(localStorage.getItem('todolist')); /*字符串*/ if(todolist){ this.setState({ list:todolist }) } } render() { return ( TodoList: 待办事项
{ this.state.list.map((value,key)=>{ if(!value.checked){ return ( - {value.title} --
) } }) }
已完成事项
{ this.state.list.map((value,key)=>{ if(value.checked){ return ( - {value.title} --
) } }) }
); }}export default Todolist;
三.封装Storage
定义自定义模块
var storage={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localStorage.getItem(key)); }, remove(key){ localStorage.removeItem(key) }};export default storage; 页面完整代码
import React,{Component} from 'react';import '../assets/css/index.css';//引入自定义模块import storage from '../model/storage';class Todolist extends Component { constructor(props) { super(props); this.state = { list:[ ] }; } addData=(e)=>{ //按下回车的时候在增加 if(e.keyCode==13){ // alert(title); let title=this.refs.title.value; let tempList=this.state.list; tempList.push({ title:title, checked:false }) //改变后的值赋值给list this.setState({ list:tempList }) //表单置为空 this.refs.title.value=''; //执行缓存数据 storage.set('todolist',tempList); } } checkboxChage=(key)=>{ // alert('111'); let tempList=this.state.list; tempList[key].checked=!tempList[key].checked; this.setState({ list:tempList }) //执行缓存数据 storage.set('todolist',tempList); } removeData=(key)=>{ let tempList=this.state.list; tempList.splice(key,1); this.setState({ list:tempList }) //执行缓存数据 storage.set('todolist',tempList); } //生命周期函数 页面加载就会触发 componentDidMount(){ //获取缓存的数据 var todolist=storage.get('todolist'); if(todolist){ this.setState({ list:todolist }) } } render() { return ( TodoList: 待办事项
{ this.state.list.map((value,key)=>{ if(!value.checked){ return ( - {value.title} --
) } }) }
已完成事项
{ this.state.list.map((value,key)=>{ if(value.checked){ return ( - {value.title} --
) } }) }
); }}export default Todolist;