Comentário: Este artigo apresenta principalmente os exemplos de uso simples de LocalStorage, banco de dados local e sessões no HTML5 Storage local. Amigos que precisam podem se referir a ele.
Um recurso muito legal do HTML5 é o armazenamento da Web, semelhante aos cookies anteriores, mas a diferença é que o armazenamento da Web tem uma capacidade local de 5 megabytes para armazenar, enquanto os cookies têm apenas 4K, o que é uma vantagem que não pode ser comparada.
O WebStrange é dividido em: LocalStorage, SessionStorage e banco de dados local.
Em seguida, vou apresentá -lo um a um:
1. LocalStorage
O uso do localStorage é relativamente simples e os métodos são:
LocalStorage.SetItem (chave, valor); // Salvar dados
LocalStorage.getItem (key); // Leia os dados
LocalStorage.removeItem (key); // Excluir dados individuais
LocalStorage.clear (); // Exclua todos os dados
Chave: LocalStorage.key (índice); // obtenha o valor de um determinado índice
Uma pequena demonstração para mostrar a função:
(função ($) {
$ (function () {
$ .fn.getFormParam = function () {
var SerializeObj = {};
var Array = this.SerializeArray ();
var str = this.Serialize ();
$ (matriz) .ECH (function () {
if (serializeObj [this.name]) {
if ($. isarray (serializeobj [this.name])) {
serializeObj [this.name] .push (this.value);
}outro{
serializeObj [this.name] = [serializeObj [this.name], this.value];
}
}outro{
serializeObj [this.name] = this.value;
}
});
retornar serializeObj;
}; </p> <p> var storageFile = json.parse (window.localStorage.getItem ('Demo'));
$ .ECH (StorageFile, função (i, val) {
$ ('#Demoform'). Find ('[name = "'+i+'"]'). Val (val);
}); </p> <p> $ ('#Demoforma'). Find ('[type = "submit"]').
var dados = $ ('#Demoforma'). getFormParam ();
window.localStorage.SetItem ('Demo', JSON.Stringify (Data));
retornar falso;
});
});
}) (jQuery)
Código HTML:
<! doctype html>
<html lang = "zh">
<head>
<meta charset = "utf-8">
<script src = "jQuery-1.10.2.min.js"> </script>
<script src = "Demo.js"> </script>
<title> Documento </title>
</head>
<Body>
<morm>
<p> <belt> <pan> Nome </span> <input> </label> </p>
<p> <belt> <pan> Age </span> <input> </celt> </p>
<p> <belt> <pan> Número do aluno </span> <input> </celt> </p>
<p> <belt> <pan> Endereço </span> <input> </label> </p>
<p> <belt> <pan> hobbies </span> <input> </celt> </p>
<p> <belt> <pan> Outros </span> <texttarea cols = "30" lobos = "10"> </sexttarea> </elabel> </p>
<p> <input type = "submit" value = "submit"> </p>
</morm>
</body>
</html>
Dessa forma, uma demonstração simples que mostra que o LocalStorage é implementado
2. SessionStorage
O uso do SessionStorage é o mesmo que o LocalStorage, mas o SessionStorage será liberado quando o navegador fechar o site, e o LocalStorage será salvo no navegador, e ambos serão usados juntos conforme apropriado.
3. Banco de dados local
Os alunos familiarizados com o desenvolvimento do iOS/Android devem estar mais familiarizados com os bancos de dados SQLite
A operação do banco de dados no HTML5 é relativamente simples, incluindo principalmente o método de opendatabase e o método de transação
Use um DB de objeto para receber objetos criados pelo OpendAtabase para acessar o banco de dados
var db = opendatabase (nome do banco de dados, versão, descrição, tamanho)
em
Nome do banco de dados: nome do banco de dados
Versão: a versão do banco de dados pode ser ignorada
Descrição: Descrição do banco de dados
Tamanho: o banco de dados alocado tamanho do espaço
O método de transação usa uma função de retorno de chamada como um parâmetro para executar um método específico para acessar o banco de dados na função.
db.transaction (função (tx)) {
tx.executesql (sqlquery, [value1, value2 ..], datahandler, errorHandler)
});
Os quatro parâmetros do método ExecutesQL são:
SQLQUERY: declarações SQL que precisam ser executadas especificamente, crie || SELECT || Atualizar || Excluir;
[Value1, Value2 ..]: Uma matriz de todos os parâmetros usados na instrução SQL. No método ExecutesQL, os parâmetros a serem usados na instrução SQL são substituídos primeiro por?, E então esses parâmetros são compostos de uma matriz por sua vez e colocados no segundo parâmetro;
Datahandler: Execute a função de retorno de chamada bem -sucedida;
ErrorHandler: a função de retorno de chamada falhou ao executar;