Quelle est la taille maximale des valeurs localStorage?

Depuis localStorage (actuellement) prend uniquement en charge les chaînes de valeurs, et dans le but de faire que les objets doivent être stringified (stockées sous forme de JSON-chaîne) avant de pouvoir être stockée, est-il défini limitation en ce qui concerne la longueur de la valeurs.

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

424
demandé sur Eric Bishard 2010-06-07 16:09:15

10 réponses

citant le article Wikipedia sur le stockage Web :

le stockage Web peut être considéré simpliste comme une amélioration sur les cookies, fournissant 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, and Opera; 10 MB per storage area in Internet Explorer ) and better programmatic interface.

et citant également d'un John Resig article [publié en janvier 2007]:

Espace De Stockage

il est sous-entendu que, avec DOM Storage, vous avez beaucoup plus de stockage espace que l'agent utilisateur typique limitations imposées aux Cookies. Toutefois, le montant qui vous est fournie n'est pas définie dans la spécification, il n'est ni diffusée de manière significative par l'agent de l'utilisateur.

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

cependant, la taille de cette zone de stockage peut être personnalisé par l'utilisateur (donc un La zone de stockage de 5MB n'est pas garantie, il n'est ni implicite) et l'agent de l'utilisateur (Opéra, par exemple, ne peut fournir 3MB-mais seul le temps le dira.)

346
répondu Daniel Vassallo 2015-01-15 05:11:01

en fait L'Opéra n'a pas de limite de 5MB. Il offre d'augmenter la limite que les applications nécessitent plus. L'utilisateur peut même choisir "stockage illimité" pour un domaine.

, Vous pouvez facilement test localStorage limites/quota vous-même.

112
répondu Artemy Tregubenko 2010-07-15 21:24:43

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 blog post .

le script va tester le réglage des chaînes de texte de plus en plus grandes jusqu'à ce que le navigateur jette et l'exception. À ce moment-là, il va effacer les données d'essai et définir une clé de taille dans localStorage stocker la taille en kilo-octets.

60
répondu cdmckay 2014-09-12 16:32:19

ne présumez pas que 5MO est disponible - la capacité de stockage locale varie selon le navigateur, avec 2,5 Mo, 5MO et unlimited étant les valeurs les plus communes. Source: http://dev-test.nemikor.com/web-storage/support-test/

23
répondu tagawa 2012-02-10 06:53:15

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

cet extrait trouvera la longueur maximale d'une chaîne qui peut ê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 de caractères est limitée en JavaScript; si vous voulez voir la quantité maximale de données qui peuvent être stockées dans localStorage lorsque non limité à une seule chaîne de caractères, vous pouvez utiliser le code en cette réponse .

Edit: Pile Extraits ne prennent pas en charge localStorage , donc voici 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

je reçois des résultats différents sur chaque course dans Internet Explorer.

20
répondu user2428118 2015-10-12 18:52:36

vous ne voulez pas stringifier de grands objets dans une seule entrée localStorage. Ce serait très inefficace - tout devrait être analysé et ré-encodé à chaque fois que de légers changements de détail. En outre, JSON ne peut pas gérer plusieurs références croisées dans une structure d'objet et élimine 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.

à la place, vous pouvez utiliser http://rhaboo.org . Il stocke de grands objets en utilisant beaucoup d'entrées localStorage de sorte que vous pouvez faire de petites modifications rapidement. 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.

13
répondu Adrian May 2014-10-01 11:32:00

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
répondu Behnam Mohammadi 2017-02-18 11:38:27

j'aime cdmckay la réponse de , mais il ne regarde pas vraiment la bonne pour vérifier la taille en temps réel: il 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, également avec une option pour choisir la taille de l'erreur peut être (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;
  }
}

pour l'essai:

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

cela fonctionne dramatiquement plus rapide pour l'erreur standard; aussi il peut être beaucoup plus précis lorsque nécessaire.

6
répondu smnbbrv 2017-05-23 10:31:39

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);
            });
}
4
répondu abhiweb 2018-06-29 08:12:56

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
répondu Itay Merchav 2014-06-17 00:01:43