Ir ao conteúdo
  • Cadastre-se
Lucas Moura Pereira

Javascript SecurityError: The operation is insecure.

Recommended Posts

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>';  
    }
}


 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×