O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

SaveGame no disco local com JS

Iniciado por Crixus, 25/03/2014 às 23:03

25/03/2014 às 23:03 Última edição: 30/04/2019 às 23:29 por Crixus
Existe um método em JavaScript que é compatível apenas com navegadores que aceitam HTML5.

Esse sistema se chama LocalStorage, ele permitem salvar, carregar, apagar ou limpar dados armazenados em pelo Javascript num local do usuário do navegador, para cada site ele salvará um arquivo.
Além de tudo a encriptação é feita para SQL, tornando impossível de ler diretamente os dados armazenados.

Mas lembre-se, não funciona no Internet Explorer, apenas no IE8+ pra frente.




Para salvar alguma informação no objeto será usado esse comando.
localStorage.setItem(a,b);

Sendo "a" o nome da informação e "b" a informação.

Exemplos:
Salvar apenas uma string  (texto comum):
localStorage.setItem('Nome','João');

Salvar apenas uma variável:
var k = 'valor da variável';
localStorage.setItem('Nome',k);





Para ler alguma informação no arquivo será usado esse comando:
localStorage.getItem(a);


Exemplo:
alert(localStorage.getItem('Nome'));





Para deletar você usará esse comando:
localStorage.removeItem(a);


Exemplo:
localStorage.removeItem('Nome');


Agora se quiser limpar toda a memória bastará simplesmente usar esse comando:
localStorage.clear();


Isso removerá toda e qualquer informação gerada pela página onde foi executado o comando, não afetará de outros sites, mas se estiver usando em local (C:) removerá de qualquer coisa gerada por todas as páginas que alguma vezes foram executadas pelo protocolo file:// que seria fora da internet e sim no seu computador.

Criando o Save Game:
Mas como salvar várias informações de um jogo num único SLOT separado e recuperar as informações de maneira prática e simples? Foi fácil, eu usei Array, ao invés de salvar várias variáveis, eu salvei todos os DADOs do jogo numa única, com Array.

Faça o teste aqui.

Se quiser o código copie aqui:
<html>
<head>
<meta charset="utf-8">
<title>Rpg Simulator - JS</title>
<script type="text/javascript">
//-- Global
//Vocab
var empty = '-- Vazio --';

//Heroi padrão
var save = [];
save[0] = "Alex";
save[1] = "Warrior";
save[2] = "300";
save[3] = "Sword";

//--Funcoes
//Salvar no Slot selecionado
function SaveGame(a,b){
 var timeGame = new Date();
 save[4] = timeGame.getFullYear()+"/"+timeGame.getMonth()+"/"+timeGame.getDate()+" "+timeGame.getHours()+":"+timeGame.getMinutes()+":"+timeGame.getSeconds();
 localStorage.setItem(a,b);
 CheckSave();
}
//Verificar todos os Slots
function CheckSave(){
 if(localStorage.getItem('SlotA') === null){
 document.getElementById('SlotA').innerHTML=empty;
 }else{
 document.getElementById('SlotA').innerHTML=localStorage.getItem('SlotA');
 }
 if(localStorage.getItem('SlotB') === null){
 document.getElementById('SlotB').innerHTML=empty;
 }else{
 document.getElementById('SlotB').innerHTML=localStorage.getItem('SlotB');
 }
 if(localStorage.getItem('SlotC') === null){
 document.getElementById('SlotC').innerHTML=empty;
 }else{
 document.getElementById('SlotC').innerHTML=localStorage.getItem('SlotC');
 }
}
//Deletar Slot selecionado
function EraseSlot(b){
 localStorage.removeItem(b);
 CheckSave();
}
//Deletar todos os Slots
function ClearSlots(){
 localStorage.clear();
 CheckSave();
}
//Mostrar Dados do Herói
function Hero(){
 var timeGame = new Date();
 save[4] = timeGame.getFullYear()+"/"+timeGame.getMonth()+"/"+timeGame.getDate()+" "+timeGame.getHours()+":"+timeGame.getMinutes()+":"+timeGame.getSeconds();
 document.getElementById('data0').innerHTML=save[0];
 document.getElementById('data1').innerHTML=save[1];
 document.getElementById('data2').innerHTML=save[2];
 document.getElementById('data3').innerHTML=save[3];
 document.getElementById('data4').innerHTML=save[4];
}
</script>
</head>
<body>
Após salvar em algum dos slots ou todos feche o navegador<br />
e abra novamente para confirmar que os dados foram salvos.
<table border="1">
<tr>
<td>File 1</td><td id="SlotA" align="center" width="320px"></td>
<td><input type="button" onclick="SaveGame('SlotA', save);" value="Save Game"></input></td>
<td><input type="button" onclick="EraseSlot('SlotA')" value="Delete"></input></td>
</tr>
<tr>
<td>File 2</td><td id="SlotB" align="center"></td>
<td><input type="button" onclick="SaveGame('SlotB', save);" value="Save Game"></input></td>
<td><input type="button" onclick="EraseSlot('SlotB')" value="Delete"></input></td>
</tr>
<tr>
<td>File 3</td><td id="SlotC" align="center"></td>
<td><input type="button" onclick="SaveGame('SlotC', save);" value="Save Game"></input></td>
<td><input type="button" onclick="EraseSlot('SlotC')" value="Delete"></input></td>
</tr>
</table>

<input type="button" onclick="ClearSlots();" value="Delete All"></input>
<input type="button" onclick="CheckSave();" value="Verificar Slots"></input>
<script type="text/javascript">CheckSave();</script>

<table border="1">
<tr><td>Nome do Personagem</td><td>Classe</td><td>HP</td><td>Arma</td><td>Tempo de jogo</td></tr>
<tr><td id="data0"></td><td id="data1"></td><td id="data2"></td><td id="data3"></td><td id="data4"></td></tr>
</table>
<input type="button" onclick="Hero();" value="Separar Dados"></input>
</body>
</html>