storage.js

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;

Todolist.js

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;