Quelle est la taille maximale des valeurs localStorage?

542

Étant donné que localStorage(actuellement) ne prend en charge que les chaînes en tant que 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.

Est-ce que quelqu'un sait s'il existe une définition qui s'applique à tous les navigateurs?

Codekie
la source
15
Je pense que personne n'a réellement répondu à la question "longueur maximale par valeur".
Pete Alvin
@PeteAlvin Je viens de répondre à la question .
user2428118
@PeteAlvin Quelqu'un y a répondu en 2015. Les autres réponses concernent la limite de la taille totale, mais pas la limite de la taille par valeur .
Ali

Réponses:

420

Citant un article de Wikipédia sur le stockage Web :

Le stockage Web peut être considéré de manière simplifiée comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus grande ( 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 de programmation.

Et citant également un article de John Resig [publié en janvier 2007]:

Espace de stockage

Il est implicite qu'avec le stockage DOM, vous disposez de beaucoup plus d'espace de stockage que les limitations typiques de l'agent utilisateur imposées aux cookies. Cependant, le montant fourni n'est pas défini dans la spécification, ni diffusé de manière significative par l'agent utilisateur.

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

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

Daniel Vassallo
la source
28
@Cupidvogel non, cela signifie que chaque domain( origin) peut stocker 5 Mo sur n'importe quel client individuel. Les données sont stockées sur la machine des clients - en aucun cas le localStoragemécanisme n'interagit entre les clients.
DanielB
6
Non, je voulais simplement m'assurer que les mêmes données sont accessibles sur plusieurs pages pour le même domaine. Souvent, je trouve le domaine des phrases et la page épelés de manière synonyme, donc je voulais juste en être sûr!
SexyBeast
9
Y a-t-il cependant une limitation à une seule valeur? (Si j'ai beaucoup de drapeaux à stocker, est-il sûr de le stocker en tant que JSON dans une seule propriété?)
phtrivier
5
J'ai Safari à 5 Mo et Chrome 39 à 10 Mo (je ne sais pas quand il a été augmenté de 5 Mo) Voir cet article html5rocks.com/en/tutorials/offline/quota-research
Ally
18
@Cupidvogel: Non, ce n'est pas par domaine, c'est par origine , car le terme est utilisé vis-à-vis de la même politique d'origine et tel: schéma + hôte + port. http://example.comet https://example.comne sont pas de la même origine (régimes différents). http://example.comet http://www.example.comne sont pas de la même origine (hôtes différents). http://example.comet http://example.com:8080ne sont pas de la même origine (ports différents). HTH. :-)
TJ Crowder
134

En fait, Opera n'a pas de limite de 5 Mo. Il propose d'augmenter la limite que les applications nécessitent plus. L'utilisateur peut même choisir "Stockage illimité" pour un domaine.

Vous pouvez facilement tester vous-même les limites / quotas de stockage local .

Tom Adler
la source
50
Ne plante plus Chrome ... Point intéressant: 5 Mo équivalent à 2,5 millions de caractères sur Chrome. Donc apparemment, UFT16 est utilisé pour localStore.
Felix Alcala le
1
@FelixAlcala Malheureusement, il bloque Chrome 15.0.874.54 beta sur Mac OS X. J'ai eu un crash à 1.500.000 caractères.
Ivan Vučica
Il a planté du chrome sur mon appareil, a également réinitialisé le bckground, pas surpris cependant, mon téléphone a si peu de RAM, il ne peut pas gérer une stupide APPLICATION FLASHLIGHT ouverte pendant que le chrome est ouvert.
Jack
6
@FelixAlcala - En fait, JavaScript expose UCS-2. Bien qu'il soit similaire, UFT16il existe des différences très importantes ... principalement liées au fait que UCS-2 est antérieur à l'UFT.
Jeremy J Starcher
@FelixAlcala Pensez-vous que l'affichage du nombre de caractères ainsi que de sa taille de disque équivalente (par exemple, 2 700 Ko de caractères ~ = 5 274 Ko) est une bonne idée?
AJ Hsu
76

Voici un script simple pour découvrir 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 et le blog .

Le script testera la définition de chaînes de texte de plus en plus grandes jusqu'à ce que le navigateur lance et fasse exception. À ce stade, il effacera les données de test et définira une clé de taille dans localStorage stockant la taille en kilo-octets.

cdmckay
la source
1
Solution cool. J'ai trouvé cette doublure , qu'en pensez-vous?
brasofilo
2
@brasofilo Je pense qu'une doublure suppose que vous avez 5 Mo, puis soustrait la quantité utilisée.
cdmckay
Ooook, coup sûr. Le problème que je rencontre avec votre code n'est pas en mesure d'obtenir des résultats corrects avec une manière correcte de convertir la taille en octets en Ko, Mo, Go en Javascript ... Je réviserai cela demain mais si vous pouvez y jeter un œil, apprécié.
brasofilo
1
amélioré les performances et la qualité de cette réponse ici
smnbbrv
C'est 2020 et cette réponse fonctionne parfaitement sur vanilla Chrome et Firefox sur Win10, donnant une taille = 5000.
A. Chiesa
34

Rechercher la longueur maximale d'une seule chaîne pouvant être stockée dans localStorage

Cet extrait trouvera la longueur maximale d'une chaîne pouvant être stockée dans localStoragechaque domaine.

//Clear localStorage
for (var item in localStorage) delete localStorage[item];

window.result = window.result || document.getElementById('result');

result.textContent = 'Test running…';

//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {

    //Variables
    var low = 0,
        high = 2e9,
        half;

    //Two billion may be a little low as a starting point, so increase if necessary
    while (canStore(high)) high *= 2;


    //Keep refining until low and high are equal
    while (low !== high) {
        half = Math.floor((high - low) / 2 + low);

        //Check if we can't scale down any further
        if (low === half || high === half) {
            console.info(low, high, half);
            //Set low to the maximum possible amount that can be stored 
            low = canStore(high) ? high : low;
            high = low;
            break;
        }


        //Check if the maximum storage is no higher than half
        if (storageMaxBetween(low, half)) {
            high = half;
            //The only other possibility is that it's higher than half but not higher than "high"
        } else {
            low = half + 1;
        }

    }

    //Show the result we found!
    result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';

    //Functions
    function canStore(strLen) {
        try {
            delete localStorage.foo;
            localStorage.foo = Array(strLen + 1).join('A');
            return true;
        } catch (ex) {
            return false;
        }
    }


    function storageMaxBetween(low, high) {
        return canStore(low) && !canStore(high);
    }

}, 0);
<h1>LocalStorage single value max length test</h1>

<div id='result'>Please enable JavaScript</div>

Notez que la longueur d'une chaîne est limitée en JavaScript; si vous souhaitez afficher la quantité maximale de données pouvant être stockées dans une liste localStoragenon limitée à une seule chaîne, vous pouvez utiliser le code dans cette réponse .

Edit: Stack Snippets ne prend pas en charge localStorage, voici donc un lien vers JSFiddle .

Résultats

Chrome (45.0.2454.101): 5242878 caractères
Firefox (40.0.1): 5242883 caractères
Internet Explorer (11.0.9600.18036) :16386 122066 122070 caractères

J'obtiens des résultats différents à chaque exécution dans Internet Explorer.

user2428118
la source
1
Drôle, mais votre test simple arrête mon système assez puissant lorsque je teste dans le navigateur Edge (sur Win 10) après environ 1 minute de course. Je ne peux donc pas ajouter de nouvelles données à vos résultats))
vatavale
33

Navigateurs mobiles:

Browser    | Chrome    | Android Browser    | Firefox     | iOS Safari
Version    | 40        | 4.3                | 34          | 6-8
Available  | 10MB      | 2MB                | 10MB        | 5MB

Navigateurs de bureau:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB

Lien de référence

Behnam Mohammadi
la source
6
D'où viennent les chiffres?
MrD
23
@BehnamMohammadi pouvez-vous ajouter une référence d'où vous avez obtenu ceci pour être complet
Chris Lang
1
Et aucune référence n'a jamais été renseignée. Mais pour la postérité, ces chiffres changent un peu. Nous devrions mettre à jour cela, nous avons plus de navigateurs et les informations actuelles.
Malavos
3
@ChrisLang a ajouté un lien
Behnam Mohammadi
1
@Malavos a ajouté un lien
Behnam Mohammadi
13

Vous ne voulez pas chaîne de gros objets en une seule entrée localStorage. Ce serait très inefficace - le tout devrait être analysé et ré-encodé chaque fois que de légers changements de détails sont apportés. De plus, JSON ne peut pas gérer plusieurs références croisées dans une structure d'objet et efface beaucoup de détails, par exemple le constructeur, les propriétés non numériques des tableaux, ce qui se trouve dans une entrée clairsemée, etc.

Au lieu de cela, vous pouvez utiliser Rhaboo . Il stocke de gros objets à l'aide de nombreuses entrées localStorage afin que vous puissiez apporter de petites modifications rapidement. Les objets restaurés sont des copies beaucoup plus précises des objets enregistré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.

Adrian May
la source
1
Merci Martin. Vous pourriez aussi bien vérifier mon repo 'evon'. Ce n'est qu'un sérialiseur en ce moment et l'encre est très humide, mais elle est plus rapide que le rhaboo et tout aussi polyvalente. Rhaboo sera bientôt converti pour l'utiliser en interne.
Adrian May
7
Utile mais je ne pense pas que cela réponde à la question "Quelle est la taille maximale de localStorage;" votre réponse pourrait être améliorée en indiquant ce qui se passe lorsque cette bibliothèque essaie de stocker quelque chose au-delà de la taille limite et comment y réagir.
Chris Moschini
6

Je fais ce qui suit:

getLocalStorageSizeLimit = function () {

    var maxLength = Math.pow(2,24);
    var preLength = 0;
    var hugeString = "0";
    var testString;
    var keyName = "testingLengthKey";

    //2^24 = 16777216 should be enough to all browsers
    testString = (new Array(Math.pow(2, 24))).join("X");

    while (maxLength !== preLength) {
        try  {
            localStorage.setItem(keyName, testString);

            preLength = testString.length;
            maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2));

            testString = hugeString.substr(0, maxLength);
        } catch (e) {
            hugeString = testString;

            maxLength = Math.floor(testString.length - (testString.length - preLength) / 2);
            testString = hugeString.substr(0, maxLength);
        }
    }

    localStorage.removeItem(keyName);

    maxLength = JSON.stringify(this.storageObject).length + maxLength + keyName.length - 2;

    return maxLength;
};
Itay Merchav
la source
5
Maroun Maroun: Vérifiez à nouveau le message, l'auteur a fourni un code pour vérifier par programme la taille maximale du stockage local. Cela semble être une réponse valable et non une autre question.
Arend
L'exécution de ces codes génère une erreur "Déclaration de retour illégale" dans Chrome, au moment de la rédaction
DrewT
6

J'aime vraiment la réponse de cdmckay , mais ça n'a pas vraiment l'air bien de vérifier la taille en temps réel: c'est tout simplement trop lent (2 secondes pour moi). Il s'agit de la version améliorée, qui est beaucoup plus rapide et plus exacte, avec également une option pour choisir la taille de l'erreur (par défaut 250,000, plus l'erreur est petite - plus le calcul est long):

function getLocalStorageMaxSize(error) {
  if (localStorage) {
    var max = 10 * 1024 * 1024,
        i = 64,
        string1024 = '',
        string = '',
        // generate a random key
        testKey = 'size-test-' + Math.random().toString(),
        minimalFound = 0,
        error = error || 25e4;

    // fill a string with 1024 symbols / bytes    
    while (i--) string1024 += 1e16;

    i = max / 1024;

    // fill a string with 'max' amount of symbols / bytes    
    while (i--) string += string1024;

    i = max;

    // binary search implementation
    while (i > 1) {
      try {
        localStorage.setItem(testKey, string.substr(0, i));
        localStorage.removeItem(testKey);

        if (minimalFound < i - error) {
          minimalFound = i;
          i = i * 1.5;
        }
        else break;
      } catch (e) {
        localStorage.removeItem(testKey);
        i = minimalFound + (i - minimalFound) / 2;
      }
    }

    return minimalFound;
  }
}

Tester:

console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact

Cela fonctionne considérablement plus rapidement pour l'erreur standard; il peut également être beaucoup plus précis lorsque cela est nécessaire.

smnbbrv
la source
6

J'ai condensé un test binaire dans cette fonction que j'utilise:

function getStorageTotalSize(upperLimit/*in bytes*/) {
    var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters)
    var test = function (_size) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; }
    var backup = {};
    for (var i = 0, n = store.length; i < n; ++i) backup[store.key(i)] = store.getItem(store.key(i));
    store.clear(); // (you could iterate over the items and backup first then restore later)
    var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true;
    while ((upperTest = test(high)) && high < _upperLimit) { low = high; high *= 2; }
    if (!upperTest) {
        var half = ~~((high - low + 1) / 2); // (~~ is a faster Math.floor())
        high -= half;
        while (half > 0) high += (half = ~~(half / 2)) * (test(high) ? 1 : -1);
        high = testkey.length + high;
    }
    if (high > _upperLimit) high = _upperLimit;
    store.removeItem(testkey);
    for (var p in backup) store.setItem(p, backup[p]);
    return high * 2; // (*2 because of Unicode storage)
}

Il sauvegarde également le contenu avant le test, puis les restaure.

Fonctionnement: il double la taille jusqu'à ce que la limite soit atteinte ou que le test échoue. Il stocke ensuite la moitié de la distance entre le bas et le haut et soustrait / ajoute la moitié de la moitié à chaque fois (soustrayez en cas d'échec et ajoutez en cas de succès); affiner dans la valeur appropriée.

upperLimitest de 1 Go par défaut, et limite la distance à parcourir de façon exponentielle avant de lancer la recherche binaire. Je doute que cela doive même être changé, mais je pense toujours à l'avenir. ;)

Sur Chrome:

> getStorageTotalSize();
> 10485762
> 10485762/2
> 5242881
> localStorage.setItem("a", new Array(5242880).join("0")) // works
> localStorage.setItem("a", new Array(5242881).join("0")) // fails ('a' takes one spot [2 bytes])

IE11, Edge et FireFox signalent également la même taille maximale (10485762 octets).

James Wilkins
la source
1
(Et n'oubliez pas localStorage.Clear()avant et après vos tests
simonmysun
5

Vous pouvez utiliser le code suivant dans les navigateurs modernes pour vérifier efficacement le quota de stockage (total et utilisé) en temps réel:

if ('storage' in navigator && 'estimate' in navigator.storage) {
        navigator.storage.estimate()
            .then(estimate => {
                console.log("Usage (in Bytes): ", estimate.usage,
                            ",  Total Quota (in Bytes): ", estimate.quota);
            });
}
Abhishek
la source
Ne fonctionne pas bien pour Chrome. Usage (in Bytes): 647 , Total Quota (in Bytes): 32901464711 C'est faux: la taille totale possible est en fait de 10485762.
James Wilkins
1

Une fois que j'ai développé l' extension Chrome (navigateur de bureau) et testé la taille maximale réelle du stockage local pour cette raison.

Mes résultats:

Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)

Plus que l' 10240 KButilisation m'a renvoyé l'erreur:

DOMException non capturée: Échec d'exécution de «setItem» sur «Stockage»: la définition de la valeur de «notes» a dépassé le quota.

smokehill
la source
0

J'ai écrit ce code simple qui teste la taille de localStorage en octets.

https://github.com/gkucmierz/Test-of-localStorage-limits-quota

const check = bytes => {
  try {
    localStorage.clear();
    localStorage.setItem('a', '0'.repeat(bytes));
    localStorage.clear();
    return true;
  } catch(e) {
    localStorage.clear();
    return false;
  }
};

Pages Github:

https://gkucmierz.github.io/Test-of-localStorage-limits-quota/

J'ai les mêmes résultats sur le chrome de bureau, l'opéra, le firefox, le brave et le chrome mobile qui est ~ 5Mbytes

entrez la description de l'image ici

Et un résultat moitié plus petit dans un safari ~ 2 Mo

entrez la description de l'image ici

gkucmierz
la source