Comentário: Este artigo apresenta principalmente o uso básico de LocalStorage, SessionStorage, Operações de Traversal, manipulação de exceções, etc. para o armazenamento local HTML5. Amigos que precisam podem se referir a ele.
O localStorage na API de armazenamento local do HTML5 é o mesmo que sessionStorage, a diferença é que o SessionStorage é limpo após o fechamento da página, enquanto o LocalStorage será salvo o tempo todo. Vamos tomar o LocalStorage como um exemplo aqui para introduzir brevemente o armazenamento local do HTML5 e dar alguns exemplos de problemas comuns, como o Traversal. LocalStorage é uma API HTML5 armazenada localmente. Ele usa pares de valores-chave para acessar dados e os dados acessados podem ser apenas uma string. Diferentes navegadores têm suporte diferente para esta API, como método de uso, espaço de armazenamento máximo, etc.
1. Métodos básicos de uso da API LocalStorage
A API do LocalStorage é fácil de entender. A seguir, são apresentadas operações e exemplos de API comuns: Definir dados: LocalStorage.SetItem (chave, valor); Exemplo:
for (var i = 0; i <10; i ++) {
LocalStorage.setItem (i, i);
}
Get Data: LocalStorage.getItem (key) Obtenha todos os dados: LocalStorage.valueof () Exemplo:
LocalStorage.getItem (i);
}
Excluir dados: LocalStorage.removeItem (key) Exemplo:
LocalStorage.removeItem (i);
}
Limpar todos os dados: LocalStorage.Clear () Obtenha o número de dados armazenados locais: LocalStorage.Length Obtenha o valor da chave dos enésimos dados: LocalStorage.Key (N)
2. Itera sobre o método do valor -chave -chave
for (var i = localStorage.Length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'O valor da chave dos dados é:' + LocalStorage.Key (i) + ', e os dados são:' + LocalStorage.getItem (LocalStorage.key (i)));
}
3. Teste de limite de tamanho de armazenamento e manuseio de exceções
3.1 Teste de limite de tamanho de armazenamento de dados
Diferentes navegadores basicamente têm restrições no tamanho de armazenamento local do HTML5. Os resultados de um teste são os seguintes:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (se exceder, uma caixa de diálogo que permite solicitações de mais espaço será exibida)
Referência do código de teste:
<! Doctype html>
<html>
<head>
<Cript>
Log da função (msg) {
console.log (msg);
alerta (msg);
} </p> <p> var limite;
var half = '1'; // Isso será alterado para o chinês e correr novamente
var str = metade;
var strtr;
enquanto (1) {
tentar {
LocalStorage.clear ();
str += metade;
LocalStorage.SetItem ('Cache', STR);
metade = str;
} catch (ex) {
quebrar;
}
}
var base = str.Length;
var off = base / 2;
var ilhaft = 1;
enquanto (desligado) {
if (Isleft) {
end = base - (off / 2);
} outro {
end = base + (off / 2);
} </p> <p> sstr = str.slice (0, end);
LocalStorage.clear ();
tentar {
LocalStorage.SetItem ('Cache', STR);
limite = strtr.Length;
Isleft = 0;
} catch (e) {
Isleft = 1;
} </p> <p> base = end;
OFF = Math.Floor (Off / 2);
} </p> <p> log ('limite:' + limite);
</script>
</html>
3.2 Manipulação de exceção de armazenamento de dados
tentar{
LocalStorage.SetItem (chave, valor);
} catch (OException) {
if (oexception.name == 'QuotAexcedEDerror') {
console.log ('Limite de armazenamento local excedido!');
// Se a informação histórica não for importante, você pode limpá -las e depois defini -las
LocalStorage.clear ();
LocalStorage.SetItem (chave, valor);
}
}