× Error: A cross-origin error was thrown.というエラーがでてきます。

Question

現在、簡単なTodoを作っており、localStorageを導入しようとしているのですが、エラーが出てしまい進まない状況です。ネットでJSON、localStorageの仕様などを見ましたが特に間違っているところが見当たりません。どこが間違えているのか教えてくださると幸いです。

<stateを管理>


import React from 'react';
import './Apptodo.css';
import ToDoListItem from './ToDoListItem';
import ToDoAddItem from './ToDoAddItem';
import ToDoDeleteItem from './ToDoDeleteItem';
import ToDoDoneItem from './ToDoDoneItem';
import ToDoCountItem from './ToDoCountItem';
import ToDoAddButtonItem from './ToDoAddButtonItem';

class AppTodo extends React.Component{

    state = { 
        count:0,                         　  //完了したTodoをカウント
        todos:[],                             //Todoの内容
        inputTitle:'',                        //入力されているtitle
        inputDescription:'',                  //入力されているdescription
        titlError:'',                         //Error表示用
        descriptionError:'',　　　　　　　　　　　　　　
        selectedIndex:null,　　　　　　　　　　//選択されているIndex
        doneCount:0,
        createdAt:new Date(),                                   //0か1で判断                        
        }
  
    handleTitle = (event) => {       //入力中のtitleをinputtitleにセット
      this.setState({
        inputTitle:event.target.value
      }
      )} 

     handleDiscription = (event) => {         //入力中のdescriptionをinputdescriptionにセット
       this.setState({
         inputDescription:event.target.value
       })
     }

      todoAdd = (e) => {
      e.preventDefault();

      if(!this.state.inputTitle){
        this.setState({
          titleError:'タイトルを入力してください'
        })
        return
      }else if(!this.state.inputDescription){
        this.setState({
          descriptionError:'内容を入力してください'
        })
        return 
      }

      const count = this.state.count + 1;

      const newTodo = {
      count: count,
      title: this.state.inputTitle,
      description: this.state.inputDescription,
      createdAt:new Date(),
      }
      
      const todo = [ ...this.state.todos, newTodo ];
    
      this.setState({
        count: newTodo.count,
        todos:todo,
        inputTitle:'',
        inputDescription:'',
        titleError:'',
        descriptionError: '',
      })
       this.todoStore();          //追加するとデータを保存      
       }     
       
       todoStore = () => {     
        localStorage.setItem(this.state.count,JSON.stringify(this.todos));        //ローカルストレージに保存する関数。
       }
      
       todoPull = () => {　　                                                               　　　　　　//ローカルストレージから取り出す関数
             var List =  localStorage.getItem(this.state.count);
             console.log(List);   
             return(
               JSON.parse(List)
             );
       }

       todoSelect = (index) => {
           this.setState({
              selectedIndex:index,
           })
       }

       todoDelete = (index) => {
           const newTodos = this.state.todos.slice();
           newTodos.splice(index,1);
           this.setState({
             todos:newTodos,
             selectedIndex:null
           })
       }

       todoDone = (index) => {
         console.log(this.props.doneCount);
             const newTodos = this.state.todos.slice();
             newTodos.splice(index,1);
             this.setState({
               todos:newTodos,
               doneCount:this.state.doneCount +1 , 
               selectedIndex:null                         //完了回数をカウントする
             })
          
       }

       render(){
         return(
          <div className="AppTodoAll">                
              <div className="AppTodoAdd">          
                  <ToDoAddItem  {...this.state} handleTitle={this.handleTitle} handleDiscription={this.handleDiscription} todoAdd={this.todoAdd}
                  alreadyAdder={this.alreadyAdder}/>                    
              </div>
              <div className="AppTodoButton">
                  <ToDoAddButtonItem count={this.state.count} todoAdd={this.todoAdd} />
              </div>
              <br></br>
              <div className="AppTodoList">
                 <ToDoListItem {...this.state} todoSelect={this.todoSelect} alreadyAdded={this.alreadyAdded} todoStore={this.todoStore} todoPull={this.todoPull} />                   
              </div>
              <br></br>
              <div className="AppTodoDone">
                <ToDoDoneItem {...this.state} todoDone={this.todoDone} />　　　　　　　　　　　　 
              </div>
              <div className="AppTodoDelete">
                <ToDoDeleteItem {...this.state} todoDelete={this.todoDelete} />                     
              </div>
              <div className="AppTodoCount">
                <ToDoCountItem {...this.state}/>                      
              </div>
           </div>   
         )
       }
}

export default AppTodo

<TodoList表示>

import React from 'react';          //ただtitleとdescriptionを表示するだけのjsファイル
import './ToDoListItem.css';      

class ToDoListItem extends React.Component{
    render(){
     var todosA = this.props.todoPull();
     console.log(todosA);
     if(todosA === null){
         return null
     }else{
     return(                  
        <div className="ToDoListItem">       
          {todosA.map( (key,index) => {                       
              return(
                    <div className="ToDoListContent" key={index}>
                    <input type="radio" onClick = { () => this.props.todoSelect(index)} /> 
                    <p>{index + 1}</p>
                    <p>{key.title}</p>
                    <p>{key.description}</p>
                    <p>{key.createdAt.toDateString()}</p>
                    </div>
                )    
          })}
          </div>                                                                       
     )
        }
     
    }
   }


export default ToDoListItem