Commentaire: Cet article présente principalement l'utilisation de base de LocalStorage, SessionStorage, des opérations de traversée, la gestion des exceptions, etc. pour le stockage local HTML5. Les amis qui en ont besoin peuvent y faire référence.
Le localstorage dans l'API de stockage locale de HTML5 est le même que SessionStorage, la différence est que SessionStorage est effacée après la fermeture de la page, tandis que LocalStorage sera enregistré tout le temps. Prenons ici un exemple localstorage pour introduire brièvement le stockage local de HTML5 et donner quelques exemples pour des problèmes communs tels que la traversée. LocalStorage est une API stockée localement HTML5. Il utilise des paires de valeurs clés pour accéder aux données, et les données accessibles ne peuvent être qu'une chaîne. Différents navigateurs ont une prise en charge différente de cette API, comme la méthode d'utilisation, l'espace de stockage maximal, etc.
1. Méthodes d'utilisation de base de l'API localstorage
L'API LocalStorage est facile à comprendre. Voici les opérations et les exemples de l'API communs: définir les données: localStorage.SetItem (clé, valeur); Exemple:
pour (var i = 0; i <10; i ++) {
localStorage.SetItem (i, i);
}
Obtenez des données: localStorage.GetItem (KEY) Obtenez toutes les données: localStorage.Valueof () Exemple:
localStorage.getItem (i);
}
Supprimer les données: LocalStorage.RemoveItem (clé) Exemple:
LocalStorage.RemoveItem (i);
}
Effacer toutes les données: localStorage.Clear () Obtenez le nombre de données stockées locales: localStorage.length Obtenez la valeur clé des données nième: localStorage.key (n)
2. Itérater la méthode de la valeur clé de la clé
pour (var i = localStorage.length - 1; i> = 0; i -) {
console.log ('' + (i + 1) + 'La valeur clé des données est:' + localStorage.key (i) + ', et les données sont:' + localStorage.getItem (localStorage.Key (i)));
}
3. Test de limite de taille de stockage et manipulation des exceptions
3.1 Test de limite de taille de stockage des données
Différents navigateurs ont essentiellement des restrictions sur la taille de stockage locale de HTML5. Les résultats d'un test sont les suivants:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opéra 12.15> 5m (s'il le dépasse, une boîte de dialogue qui permet aux demandes de plus d'espace apparaîtra)
Référence du code de test:
<! Doctype html>
<html>
<adal>
<cript>
Fonction Log (msg) {
console.log (msg);
alerte (msg);
} </p> <p> Var Limit;
var half = '1'; // Cela sera changé en chinois et sera à nouveau
var str = moitié;
var strtr;
tandis que (1) {
essayer {
localStorage.Clear ();
str + = moitié;
localStorage.SetItem («cache», str);
moitié = str;
} catch (ex) {
casser;
}
}
var base = str.length;
var off = base / 2;
var isleft = 1;
while (off) {
if (isleft) {
end = base - (off / 2);
} autre {
end = base + (off / 2);
} </p> <p> sstr = str.slice (0, end);
localStorage.Clear ();
essayer {
localStorage.SetItem («cache», str);
limit = strtr.length;
Isleft = 0;
} catch (e) {
Isleft = 1;
} </p> <p> base = end;
off = math.floor (off / 2);
} </p> <p> log ('limite:' + limite);
</cript>
</html>
3.2 Gestion des exceptions de stockage de données
essayer{
localStorage.SetItem (clé, valeur);
} catch (oexception) {
if (oException.name == 'quotaExceedEdError') {
console.log («Limite de stockage locale dépassé!»);
// Si les informations historiques ne sont pas importantes, vous pouvez les effacer puis la définir
localStorage.Clear ();
localStorage.SetItem (clé, valeur);
}
}