Controller em JavaScript

Boa noite! Estou criando meu primeiro projeto e quero saval no LocalStorage com uma controller mais n entendo muito bem como ela funciona. Queria um lugar bom para ler sobre a controller e saber como ela funciona. Vou colocar uma controller que achei para adaptar e os dados que quero capturar;

html 1 <html>   <head>     <meta charset="utf-8" />     <title>App Help Desk</title>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      <style>       .card-abrir-chamado {         padding: 30px 0 0 0;         width: 100%;         margin: 0 auto;       }     </style>   </head>    <body>      <nav class="navbar navbar-dark bg-dark">       <a class="navbar-brand" href="#">         <img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="">         App Help Desk       </a>     </nav>      <div class="container">           <div class="row">          <div class="card-abrir-chamado">           <div class="card">             <div class="card-header">               Abertura de chamado             </div>             <div class="card-body">               <div class="row">                 <div class="col">                                      <form>                     <div class="form-group">                       <label>Título</label>                       <input type="text" class="form-control" placeholder="Título">                     </div>                                          <div class="form-group">                       <label>Categoria</label>                       <select class="form-control">                         <option>Criação Usuário</option>                         <option>Impressora</option>                         <option>Hardware</option>                         <option>Software</option>                         <option>Rede</option>                       </select>                     </div>                                          <div class="form-group">                       <label>Descrição</label>                       <textarea class="form-control" rows="3"></textarea>                     </div>                      <div class="row mt-5">                       <div class="col-6">                         <a class="btn btn-lg btn-warning btn-block" a href="home.html">Voltar</a>                       </div>                        <div class="col-6">                         <button class="btn btn-lg btn-info btn-block" type="submit">Abrir</button>                       </div>                     </div>                   </form>                  </div>               </div>             </div>           </div>         </div>     </div>   </body> </html>  html 2  <html>   <head>     <meta charset="utf-8" />     <title>App Help Desk</title>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      <style>       .card-consultar-chamado {         padding: 30px 0 0 0;         width: 100%;         margin: 0 auto;       }     </style>   </head>    <body>      <nav class="navbar navbar-dark bg-dark">       <a class="navbar-brand" href="#">         <img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="">         App Help Desk       </a>     </nav>      <div class="container">           <div class="row">          <div class="card-consultar-chamado">           <div class="card">             <div class="card-header">               Consulta de chamado             </div>                          <div class="card-body">                              <div class="card mb-3 bg-light">                 <div class="card-body">                   <h5 class="card-title">Título do chamado...</h5>                   <h6 class="card-subtitle mb-2 text-muted">Categoria</h6>                   <p class="card-text">Descrição do chamado...</p>                  </div>               </div>                <div class="card mb-3 bg-light">                 <div class="card-body">                   <h5 class="card-title">Título do chamado...</h5>                   <h6 class="card-subtitle mb-2 text-muted">Categoria</h6>                   <p class="card-text">Descrição do chamado...</p>                  </div>               </div>                <div class="row mt-5">                 <div class="col-6">                   <a class="btn btn-lg btn-warning btn-block" href="home.html">Voltar</a>                   <script>                   </script>                 </div>               </div>             </div>           </div>         </div>       </div>     </div>   </body> </html>  var pessoaControllers = (function () {     var pessoas = localStorage.getItem('pessoas');     if (pessoas) pessoas = JSON.parse(pessoas);     pessoas = pessoas || [];      function updateStorage() {         var strPessoas = JSON.stringify(pessoas);         localStorage.setItem('pessoas', strPessoas);     }      function change(item, action) {         if (!(item instanceof Pessoa)) {             alert('Ação não permitida');             return;         }         action();         updateStorage();     }      return {         get: function (prop, value) {             if (prop && value)                 return pessoas.find(p => p[prop] === value);             return pessoas;         },         add: function (item) {             change(item, function () {                 pessoas.push(item);             });         },         remove: function (item) {             change(item, function () {                 var index = pessoas.findIndex(p => p.id === item.id);                 pessoas = pessoas.splice(index);             });         },         update: function (item) {             change(item, function () {                 var p = pessoas.find(p => p.id === item.id);                 Object.assign(p, item);             });         }     } })();   PARTE 2  var Pessoa = (function () {     var id = 1     return function Pessoa(nome, sobreNome) {         this.id = id++;         this.nome = nome;         this.sobreNome = sobreNome;     }     })();