09.React的模块化以及封装Storage实现todolist 待办事项已经完成事项以及实现数据持久化（下）...

最新推荐文章于 2020-09-28 17:39:16 发布

weixin_33901641

最新推荐文章于 2020-09-28 17:39:16 发布

阅读量220

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/glorylion/blog/3000957

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.添加缓存数据

//执行缓存数据
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 (
            <div>
               
                <header className="title">TodoList: 　<input ref="title" onKeyUp={this.addData} /> </header>

                <h2>待办事项</h2>

                <hr />

                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(!value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })


                    }
                </ul>           



                <h2>已完成事项</h2>

                <hr />
                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })
                    }
                </ul>    


            </div>
        );
    }
}
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 (
            <div>
               
                <header className="title">TodoList: 　<input ref="title" onKeyUp={this.addData} /> </header>

                <h2>待办事项</h2>

                <hr />

                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(!value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })


                    }
                </ul>           



                <h2>已完成事项</h2>

                <hr />
                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })
                    }
                </ul>    


            </div>
        );
    }
}
export default Todolist;

转载于:https://my.oschina.net/glorylion/blog/3000957