react综合案例-todolist、localstorage缓存数据
1、工具类storage.js
var app ={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
delete(key){
localStorage.removeItem(key);
},
countFalseNum(key){
let count=new Number();
let list = JSON.parse(localStorage.getItem(key));
list.map(function (value,key) {
if(value.checked==false){
count = count+;
}
})
return count;
},
countTrueNum(key){
let count=new Number();
let list = JSON.parse(localStorage.getItem(key));
list.map(function (value,key) {
if(value.checked==false){
count = count+;
}
})
return count;
}
}
export default app;
2、todolist案例实现
import React from 'react';
import storage from '../modules/storage';
class Todolist1 extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
finishList:[
/* {
title:"录制java",
checked:true
},
{
title:"录制react",
checked:false
},
{
title:"录制python",
checked:true
}*/
]
};
} //生命周期函数 页面加载就会触发
componentDidMount(){
//获取缓存的数据
let todoList = storage.get("TodoList");
if(todoList){
this.setState({
finishList:todoList
})
}
}
addData=(e)=>{
if(e.keyCode==){
let title=this.refs.title.value;
let tempList = this.state.finishList;
tempList.push({
title:title,
checked:false
})
this.setState({
list:tempList
});
//增加框设置为空
this.refs.title.value="";
//缓存数据,使用localStorage,而将一个对象转为字符串使用JSON.stringify()函数
storage.set("TodoList",tempList);
}
} changeState=(key)=>{
let templist =this.state.finishList;
templist[key].checked =!templist[key].checked;
this.setState({
list:templist
});
storage.set("TodoList",templist);
}
deleteData=(key)=>{
let templist =this.state.finishList;
templist.splice(key,);
this.setState({
list:templist
})
storage.set("TodoList",templist);
} render(){
return (
<div>
Todolist index
<h2>Todolist演示</h2>
<input ref="title" onKeyUp={this.addData}/>
<hr/>
<h2> </h2>
<h2>正在进行</h2> <hr/>
{
this.state.finishList.map( (value,key)=> {
if(value.checked==false){
return(
<li key={key}>
<input type="checkbox" checked={value.checked} onChange={this.changeState.bind(this,key)}/>{value.title}
---<button onClick={this.deleteData.bind(this,key)}>删除</button>
</li>
)
}
})
}
<h2>已完成事项</h2>
{
this.state.finishList.map( (value,key)=> {
if(value.checked==true){
return(
<li key={key}>
<input type="checkbox" checked={value.checked} onChange={this.changeState.bind(this,key)} />{value.title}
---<button onClick={this.deleteData.bind(this,key)}>删除</button>
</li>
)
}
})
}
<hr/> </div>
)
}
}
export default Todolist1;
3、app.js加载该组建
import React, { Component } from 'react';
import './assets/css/App.css';
import Todolist1 from './components/Todolist1';
class App extends Component {
render() {
return(
<div>
你好
<Todolist1/>
</div>
)
}
}
export default App;
注意:
、localStorage的使用
、this对象的指向
react综合案例-todolist、localstorage缓存数据的更多相关文章
- [RN] React Native 使用 AsyncStorage 存储 缓存数据
React Native 使用 AsyncStorage 存储 缓存数据 AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的 ...
- 夺命雷公狗-----React---22--小案例之react经典案例todos(完成数据的遍历)
在很多前端框架中todos都是一个小的参考例子,在react中当然也是不例外的,先来看看最终的效果先... 这个就是官方的例子,我们先来分析下他是由那及格组建组合成的... 再来分析下他是的数据最终是 ...
- 面localStorage用作数据缓存的简易封装
面localStorage用作数据缓存的简易封装 最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但 ...
- 072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法
072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法 本文知识点:综合案例-数组移位-在指定位置处插入数据方法 ...
- 070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据
070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据 本文知识点:综合案例-数组移位-从键盘接收数据 说明:因为时间紧张 ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- 使用React实现一个TodoList案例
1.效果图: 2.项目源码 3.源码 TodoList.js import React, { Component, Fragment } from 'react'; import TodoItem f ...
- springAop:Aop(Xml)配置,Aop注解配置,spring_Aop综合案例,Aop底层原理分析
知识点梳理 课堂讲义 0)回顾Spring体系结构 Spring的两个核心:IoC和AOP 1)AOP简介 1.1)OOP开发思路 OOP规定程序开发以类为模型,一切围绕对象进行,OOP中完成某个任务 ...
随机推荐
- lftp连接异常情况分析过程
[问题现象]:通过rpm安装好lftp后,执行lftp huangmr:huangmr@192.168.107.132无法连接(lftp huangmr@192.168.107.132:~> l ...
- linux的一些运维操作基本知识
1 ~/.bashrc 这个可以认为是linux系统的启动项,每次启动的时候都会运行一些这里边的命令: 常见的有: alias rm='rm -i'//修改某些指令: export LD_LIBRAR ...
- 搭建CentOs7的WebServer
CentOs7,在安装的时候,自己可以定义一些东西,包括硬盘分区,服务器角色等. 这一些就搭了一个BasicWebServer,这样的话,里面的很多勾选,包括Java,Perl,Python,php等 ...
- Ubuntu 部署Python开发环境
一.开发环境包安装 sudo apt-get install git-core sudo apt-get install libxml2-dev sudo apt-get install libxsl ...
- Share:《THE ULTIMATE XSS PROTECTION CHEATSHEET FOR DEVELOPERS》
Ajin Abraham(OWASP Xenotix XSS Exploit Framework的作者哦!)编写的<THE ULTIMATE XSS PROTECTION CHEATSHEET ...
- web性能优化-浏览器渲染原理
在web性能优化-浏览器工作原理中讲到,浏览器渲染是在renderer process中完成的. 那我们来看下renderer process究竟干了什么? Renderer Process包含的线程 ...
- mysql向redis导入数据
数据库结构如下 如果是linux系统下,如此整备数据 SELECT CONCAT( "*10\r\n", '$', LENGTH(redis_cmd), '\r\n',redis_ ...
- Acwing-283-多边形(区间DP)
链接: https://www.acwing.com/problem/content/285/ 题意: "多边形游戏"是一款单人益智游戏. 游戏开始时,给定玩家一个具有N个顶点N条 ...
- Acwing-271-杨老师的照相排列(DP)
链接: https://www.acwing.com/problem/content/273/ 题意: 杨老师希望给他的班级拍一张合照. 学生们将站成左端对齐的多排,靠后的排站的人数不能少于靠前的排. ...
- react浏览器回退按钮的时候传递参数
本来是有这个需求的,但是后来发现回退不也是到某个页面吗?接下来就使用了redux,真香啊,不管用户怎么操作,你到这个界面都给他一个值就完事了,没有就不给他这个值. 哈哈哈,公司框架使用umi.上代码 ...