Gravar dados no WebStorage

Front-end
, , ,
#1

Estou querendo gravar os dados do aluno com as notas e a media do aluno no webStorage e apresentar os dados juntos com media em uma table mas aparece esse erro.

webSorage

<!DOCTYPE html>
 <html>
 <head>
 <script src="js/jquery.min.js"></script>
  <script> 
var qtd;
$(function(){
   $("#btn1").click(cadastrar); 
      $("#btn2").click(mostrar); 
    
     if(localStorage.getItem("qtd")==null){
        
        qtd=0;
    }
    else{
        
        qtd=parseInt(localStorage.getItem("qtd"));
    }
    
    
    
});


function caculoMedia(){
		var media;
	var parcial=$("#parcial").val();
	var proj=$("#projeto").val();
	var regi=$("#regimental").val();
	
	media=(parcial+proj+regi)/3;
		
	}

          function cadastrar(){
    
            qtd++;
	
		var media;
	var parcial=$("#parcial").val();
	var proj=$("#projeto").val();
	var regi=$("#regimental").val();
	
	var media=(parcial+proj+regi)/3;
	
    localStorage.setItem("rgm"+qtd,$("#rgm").val());
     localStorage.setItem("nome"+qtd,$("#nome").val());
     localStorage.setItem("par"+qtd,$("#parcial").val());
     localStorage.setItem("pro"+qtd,$("#projeto").val());
     localStorage.setItem("reg"+qtd,$("#regimental").val());
	localStorage.setItem("media"+qtd,media);
     localStorage.setItem("qtde",qtd);
    
}
    
   
function mostrar(){
    if(qtd<1){
        alert("NADA")
       
       }
    else{
       
        for(var i=1;i<=qtd;i++){
			
			var conteudo="<table border='2'>";
	 conteudo+="<tr>";
	 conteudo+="<th>";
	conteudo+="<div class='aluno'><p>RGM</p></div>";
	  conteudo+="</th>";
	conteudo+="<th>";
	conteudo+="<div class='media'><p>Nome</p></div>";
	  conteudo+="</th>";
	conteudo+="<th>";
	conteudo+="<div class='situacao'><p>Parcial</p></div>";
	  conteudo+="</th>";
			conteudo+="<th>";
	conteudo+="<div class='situacao'><p>Projeto</p></div>";
	  conteudo+="</th>";
			conteudo+="<th>";
	conteudo+="<div class='situacao'><p>Regimental</p></div>";
	  conteudo+="</th>";
			
				conteudo+="<th>";
	conteudo+="<div class='situacao'><p>Media</p></div>";
	  conteudo+="</th>";
	 conteudo+="</tr>";
			
            conteudo+="RGM"+localStorage.getItem("rgm"+i);
             conteudo+="Nome"+localStorage.getItem("nome"+i);
			conteudo+="Parcial"+localStorage.getItem("parcial"+i);
			conteudo+="Projeto"+localStorage.getItem("projeto"+i);
			conteudo+="Regimental"+localStorage.getItem("regimental"+i);
			conteudo+="Media"+localStorage.getItem("media");
			
            
        }
        $("#rel").html(conteudo);
		 document.getElementById("#rel").innerHTML=conteudo;
        
    }
    
    
   }
</script>
</head>
<body>
<form>
RGM:<input type="text" id="rgm"><br>
Nome:<input type="text" id="nome"><br>
PArcial:<input type="text" id="parcial"><br>
Projeto:<input type="text" id="projeto"><br>
Regimetal:<input type="text" id="regimental"><br>
    <input type="button" id="btn1" value="CAD"><br>
    <input type="button" id="btn2" value="SHOW"><br>
    
    </form>
<div id="rel"></div>
    
</body>