Javascript SecurityError: The operation is insecure.

Lucas Moura Pereira · 21 de novembro de 2018

Pessoal! Estou fazendo um formulário de cadastro de filmes e sempre esta dando o erro: SecurityError: The operation is insecure. se alguém saberia o que significa?

Código HTML - index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FakeDB Filmes</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body onload= "mostrafilmes()">
<h1>FakeDB JSON - CRUD de FILMES</h1>


    <div class="container">
    <div class="row">
        <div id="msg" class="col-sm-10 offset-sm-1 "></div>
    </div>

        <form id="form-filmes">
                <div class="col-sm-8">
                    <label for="inputTitulo">Titulo (*)</label>
                    <input type="text" class="form-control" id="inputTitulo" required placeholder="Informe o nome do filme que deseja cadastrar">
                </div>
                <div class="col-sm-8">
                    <label for="inputDirecao">Direção (*)</label>
                    <input type="text" class="form-control" id="inputDirecao" required placeholder="Dirigido por">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-5">
                    <label for="inputEstreia">Estreia (*)</label>
                    <input type="text" class="form-control" id="inputEstreia" required placeholder="Informe o ano da estreia do filme">
                </div>
                <div class="col-sm-7">
                    <label for="inputClassificacao">Classificação (*)</label>
                    <input type="Classificacao" class="form-control" id="inputClassificacao" required placeholder="Informe a classificacao etária">  
                </div>
                 <div class="col-sm-7">
                    <label for="inputDuracao">Duração (*)</label>
                    <input type="Duracao" class="form-control" id="inputDuracao" required placeholder="Informe a duracao em minutos do filme">  
                </div>
                <div class="col-sm-12">
                    <label for="inputGenero">Gênero (*)</label>
                    <input type="text" class="form-control" id="inputGenero" required placeholder="Informe o gênero do filme">
                </div>
                <div class="col-sm-12">
                    <label for="inputSinopse">Sinopse (*)</label>
                    <input type="text" class="form-control" id="inputSinopse" required placeholder="Sinopse">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <small>(*) Campos obrigatórios</small>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-12">
                    <input type="submit" class="btn btn-success" id="btnInsert" value="Inserir"> 
                </div>
            </div>
            
        </form>
    </div>

        <div class="row">
            <div class="col-sm-12">
                <table id="grid-filmes" class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Titulo</th>
                            <th scope="col">Gênero</th>
                            <th scope="col">Sinopse</th>
                        </tr>
                    </thead>
                    <tbody id="table-filmes">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

</html>

</CODE>

Código js - main.js

<CODE>

document.getElementById('form-filmes').addEventListener('submit', cadastrafilmes); 

function cadastrafilmes(evento){

    var inputTitulo = document.getElementById('inputTitulo').value;
    var inputDirecao = document.getElementById('inputDirecao').value
    var inputEstreia = document.getElementById('inputEstreia').value
    var inputClassificacao = document.getElementById('inputClassificacao').value
    var inputDuracao = document.getElementById('inputDuracao').value
    var inputGenero = document.getElementById('inputGenero').value
    var inputSinopse = document.getElementById('inputSinopse').value
    
    if(!inputTitulo && !inputDirecao &&!inputEstreia && !inputClassificacao && !inputDuracao && !inputGenero &&!inputSinopse){
        alert("Por favor, preencha os campos em branco!");
        return false;
    }

    movi = {
        titles: inputTitulo,
        direction: inputDirecao,
        debut: inputEstreia,
        ranking: inputClassificacao,
        duration: inputDuracao,
        genre: inputGenero,
        synopsis: inputSinopse
    }

    if(localStorage.getItem('stream') == null){
        var movis = [];
        movis.push(movi);
        localStorage.setItem('stream', JSON.stringify(movis));
    }else{
        var movis = JSON.parse(localStorage.getItem('stream'));
        localStorage.setItem('stream', JSON.stringify(movis));
    }

    document.getElementById('form-filmes').reset();

    mostrafilmes();

    evento.preventDefault();

}

function apagarfilmes(titles){
    var movis = JSON.parse(localStorage.getItem('stream'));

    for(var i = 0; i< movis.length; i++) {
        if(movis.titles == titles){
            movis.splice(i, 1);

        }

        localStorage.setItem('stream', JSON.stringify(movis));

    }   
    
    mostrafilmes();

}


function mostrafilmes(){
    var movis = JSON.parse(localStorage.getItem('stream'));  ====>> O Erro esta sendo indicado nesta linha!
    var movisResultado = document.getElementById('table-filmes');

    movisResultado.innerHTML = '';

    for(var i = 0; i < movis.length; i++){
        var titles = movis.titles;
        var direction = movis.direction;
        var debut = movis.debut;
        var ranking = movis.ranking;
        var duration = movis.duration;
        var genre = movis.genre;
        var synopsis = movis.synopsis;

        movisResultado.innerHTML += '<tr><td>' + titles +
                               '</td><td>'+ direction +
                               '</td><td>'+ debut +
                               '</td><td>'+ ranking +
                               '</td><td>'+ duration +
                               '</td><td>'+ genre +
                               '</td><td>'+ synopsis +
                               '</td><td><button class="btn btn-danger" onclick="apagarfilmes(\''+ titles + '\')">Excluir</button></td>'+
                               '</tr>';  
    }
}