Quelle est la taille max de localStorage valeurs?

Citant le Article de wikipédia sur le Web de Stockage:

De stockage sur le Web peut être considéré simplement comme une amélioration sur les cookies, en apportant une plus grande capacité de stockage (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 l'amélioration des interfaces de programmation.

Et aussi des citations à partir d'un John Resig article [posté janvier 2007]:

De L'Espace De Stockage

Il est implicite que, avec DOM Stockage,
vous avez beaucoup plus de stockage
l'espace que le type de l'agent utilisateur
limitations imposées sur les Cookies.
Toutefois, le montant qui vous est fournie
n'est pas défini dans le cahier des charges,
ni est-il véritablement de radiodiffusion 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
la taille de stockage pour l'ensemble d'un domaine.
Cela vous donne beaucoup plus d'espace
de travailler avec d'un typique 2KB
cookie.

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

Voici un simple script 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 post de blog.

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

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

Cet extrait de trouver la longueur maximale d'une Chaîne de caractères 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>

Noter que la longueur d'une chaîne de caractères est limité en JavaScript; si vous souhaitez afficher la quantité maximale de données pouvant être stockées dans localStorage lorsqu'il n'est pas limité à une seule chaîne, vous pouvez utiliser le code dans 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

J'obtiens des résultats différents sur chaque lancer dans Internet Explorer.

Vous ne voulez pas stringify de grands objets en un seul localStorage entrée. Ce serait très inefficace - le tout devra être analysé et ré-encodé à chaque fois qu'un léger détail des modifications. Aussi, JSON ne peut pas gérer de multiples renvois à l'intérieur d'une structure de l'objet et efface beaucoup de détails, par exemple le constructeur, non-numériques propriétés des matrices, ce qui est dans un clairsemée d'entrée, etc.

Au lieu de cela, vous pouvez utiliser Rhaboo. Il stocke des objets volumineux à l'aide de beaucoup de localStorage entrées de sorte que vous pouvez faire de petits changements rapidement. Les objets restaurés sont beaucoup plus que des copies exactes de ceux qui sont sauvés et ceux que l'API est incroyablement simple. E. g.:

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.

Vous pouvez utiliser le code suivant dans les navigateurs modernes pour contrôler efficacement le quota de stockage (total & 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);
});
}

J'ai condensé binaire test 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 soutient en outre le contenu avant de le tester, puis les restitue.

Comment il fonctionne: 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 de la soustraction/ajoute la moitié de la moitié à chaque fois (soustraction sur l'échec et l'ajouter sur la réussite); rodage dans la bonne valeur.

upperLimit est de 1 go par défaut, et à la limite juste à quelle distance vers le haut pour analyser de façon exponentielle avant de commencer la recherche binaire. Je doute que cela va même plus besoin d'être changé, mais je suis toujours en train de penser à l'avance. 😉

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 de plus, FireFox rapport à la même taille max (10485762 octets).