Quelle est la taille maximale des valeurs de localStorage ?

Question

Desde localStorage ne prend (actuellement) en charge que les chaînes de caractères comme valeurs, et pour ce faire, les objets doivent être stringifiés (stockés en tant que chaîne JSON) avant de pouvoir être stockés. Existe-t-il une limitation définie concernant la longueur des valeurs ?

Quelqu'un sait-il s'il existe une définition qui s'applique à tous les navigateurs ?

Answer 1

Citant le Article de Wikipédia sur le stockage sur le Web :

Le stockage sur le web peut être considéré de manière simpliste comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus importante ( 10 Mo par origine dans Google Chrome( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox et Opera ; 10 Mo par zone de stockage dans Internet Explorer ) et de meilleures interfaces programmatiques.

Et citant également un Article de John Resig [affiché en janvier 2007] :

Espace de stockage

Il est sous-entendu que, avec DOM Storage, vous disposez de beaucoup plus d'espace de stockage que l'agent utilisateur typique imposées aux cookies. Cependant, la quantité qui est fournie n'est pas définie dans la spécification, et elle n'est pas non plus diffusée de manière significative par l'agent utilisateur.

Si vous regardez le code source de Mozilla nous pouvons voir que 5120KB est la taille de stockage par défaut de stockage par défaut pour un domaine entier. Cela vous donne beaucoup plus d'espace pour travailler qu'un cookie typique de 2KB typique.

Cependant, la taille de cette zone de stockage peut être personnalisée par l'utilisateur (ainsi, une zone de stockage de 5 Mo n'est pas garantie, et n'est pas non plus implicite) et l'agent utilisateur (Opera, par exemple, peut ne fournir que 3MB - mais seul le temps nous le dira).

Answer 2

En fait, Opera n'a pas de limite de 5MB. Il propose d'augmenter cette limite en fonction des besoins des applications. L'utilisateur peut même choisir "Stockage illimité" pour un domaine.

Vous pouvez facilement test des limites/quotas de localStorage vous-même.

Answer 3

Voici un script simple pour connaître la limite :

if (localStorage && !localStorage.getItem('size')) {
    var i = 0;
    try {
        // Test up to 10 MB
        for (i = 250; i <= 10000; i += 250) {
            localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
        }
    } catch (e) {
        localStorage.removeItem('test');
        localStorage.setItem('size', i - 250);            
    }
}

Voici l'essentiel , JSFiddle y article de blog .

Le script va tester des chaînes de texte de plus en plus grandes jusqu'à ce que le navigateur lève une exception. À ce moment-là, il effacera les données de test et définira une clé de taille dans localStorage stockant la taille en kilo-octets.

Answer 4

Ne partez pas du principe que 5 Mo sont disponibles - localLa capacité de stockage varie selon le navigateur, les valeurs les plus courantes étant 2,5 Mo, 5 Mo et illimité. Source : http://dev-test.nemikor.com/web-storage/support-test/

Answer 5

Il n'est pas souhaitable de regrouper des objets volumineux dans une seule entrée localStorage. Ce serait très inefficace : il faudrait analyser et ré-encoder l'ensemble à chaque fois qu'un petit détail change. De plus, JSON ne peut pas gérer les références croisées multiples au sein d'une structure d'objet et efface de nombreux détails, par exemple le constructeur, les propriétés non numériques des tableaux, le contenu d'une entrée éparse, etc.

Au lieu de cela, vous pouvez utiliser Rhaboo . Il stocke les objets de grande taille en utilisant de nombreuses entrées localStorage afin que vous puissiez effectuer rapidement de petites modifications. Les objets restaurés sont des copies beaucoup plus précises des objets sauvegardés et l'API est incroyablement simple. Par exemple :

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

BTW, je l'ai écrit.