Question Quelle est la taille maximale des valeurs de localStorage?


Depuis localStorage (actuellement) ne prend en charge que les chaînes en tant que valeurs, et pour que 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?


414
2018-06-07 12:09


origine


Réponses:


Citant de la Article Wikipedia sur le stockage Web:

Le stockage Web peut être considéré de manière simpliste 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 programmatiques.

Et aussi citer d'un Article de John Resig [publié en janvier 2007]:

Espace de stockage

Il est sous-entendu que, avec le stockage DOM,   vous avez considérablement plus de stockage   espace que l'agent d'utilisateur typique   limitations imposées aux cookies.   Cependant, le montant qui est fourni   n'est pas défini dans la spécification,   ni est-il diffusé de manière significative par   l'agent utilisateur.

Si vous regardez le code source de Mozilla   on peut voir que 5120KB est le défaut   taille de stockage pour un domaine entier.   Cela vous donne beaucoup plus d'espace   travailler avec un 2KB typique   biscuit.

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


339
2018-06-07 12:12



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

Vous pouvez facilement test localStorage limites / quota toi même.


110
2017-07-15 21:24



Voici un script simple pour trouver 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 article de blog.

Le script testera la définition de chaînes de caractères de plus en plus grandes jusqu'à ce que le navigateur lève et exception. À ce stade, il va effacer les données de test et définir une clé de taille dans localStorage en stockant la taille en kilo-octets.


59
2017-09-12 16:12



Ne supposez pas que 5 Mo sont disponibles - La capacité de localStorage varie selon le navigateur, avec 2,5 Mo, 5 Mo et illimité étant les valeurs les plus courantes. La source: http://dev-test.nemikor.com/web-storage/support-test/


23
2018-02-10 06:53



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

Cet extrait trouvera la longueur maximale d'une chaîne pouvant être stockée dans localStorage par 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ée dans localStorage lorsqu'il n'est pas limité à une seule chaîne, vous peut utiliser le code dans cette réponse.

Modifier: Stack Snippets ne supporte pas localStorage, alors voici un lien vers JSFiddle.

Résultats

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

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


19
2017-10-12 15:38



    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

13
2018-02-18 11:32



Vous ne souhaitez pas contraindre des objets volumineux dans 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étail sont apportés. En outre, 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 est dans une entrée clairsemée, etc.

Au lieu de cela, vous pouvez utiliser http://rhaboo.org. Il stocke des objets volumineux en utilisant un grand nombre d'entrées localStorage, ce qui vous permet d'apporter rapidement de petites modifications. Les objets restaurés sont des copies beaucoup plus précises des 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.


12
2017-10-01 11:32



J'aime vraiment La réponse de cdmckay, mais ça n'a pas vraiment l'air de vérifier la taille en temps réel: c'est trop lent (2 secondes pour moi). Ceci est la version améliorée, qui est beaucoup plus rapide et exacte, avec également une option pour choisir la taille de l'erreur (par défaut 250,000, la plus petite erreur est - 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 rapide pour l'erreur standard; il peut aussi être beaucoup plus précis lorsque cela est nécessaire.


6
2018-03-14 12:39



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;
};

3
2018-06-16 21:28