Comment déterminer la taille de localStorage

Question

Je développe actuellement un site qui utilisera le localStorage de HTML5. J'ai lu tout ce qui concerne les limitations de taille pour les différents navigateurs. Cependant, je n'ai rien vu sur la façon de connaître la taille actuelle d'une instance de localStorage. Cette question semble indiquer que JavaScript ne dispose pas d'un moyen intégré d'afficher la taille d'une variable donnée. Est-ce que localStorage a une propriété de taille de mémoire que je n'ai pas vue ? Existe-t-il un moyen simple de faire cela que je n'ai pas vu ?

Mon site est destiné à permettre aux utilisateurs de saisir des informations en mode "hors ligne", il est donc très important de pouvoir les avertir lorsque la mémoire est presque pleine.

Answer 1

Exécutez cet extrait dans la console JavaScript (version d'une ligne) :

var _lsTotal=0,_xLen,_x;for(_x in localStorage){ if(!localStorage.hasOwnProperty(_x)){continue;} _xLen= ((localStorage[_x].length + _x.length)* 2);_lsTotal+=_xLen; console.log(_x.substr(0,50)+" = "+ (_xLen/1024).toFixed(2)+" KB")};console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

Le même code en plusieurs lignes pour faciliter la lecture

var _lsTotal = 0,
    _xLen, _x;
for (_x in localStorage) {
    if (!localStorage.hasOwnProperty(_x)) {
        continue;
    }
    _xLen = ((localStorage[_x].length + _x.length) * 2);
    _lsTotal += _xLen;
    console.log(_x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB")
};
console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

ou ajouter ce texte dans le champ "emplacement" d'un signet pour une utilisation plus pratique

javascript: var x, xLen, log=[],total=0;for (x in localStorage){if(!localStorage.hasOwnProperty(x)){continue;} xLen =  ((localStorage[x].length * 2 + x.length * 2)/1024); log.push(x.substr(0,30) + " = " +  xLen.toFixed(2) + " KB"); total+= xLen}; if (total > 1024){log.unshift("Total = " + (total/1024).toFixed(2)+ " MB");}else{log.unshift("Total = " + total.toFixed(2)+ " KB");}; alert(log.join("\n")); 

P.S. Les snippets sont mis à jour en fonction des demandes formulées dans les commentaires. Le calcul inclut maintenant la longueur de la clé elle-même. Chaque longueur est multipliée par 2 car le caractère en javascript est stocké en UTF-16 (occupe 2 octets).

P.P.S. Cela devrait fonctionner aussi bien avec Chrome qu'avec Firefox.

Answer 2

En m'inspirant de ce que @Shourav a dit plus haut, j'ai écrit une petite fonction qui devrait récupérer avec précision tous vos fichiers localStorage (pour le domaine actuel) et calculez la taille combinée afin de savoir exactement quelle quantité de mémoire est occupée par vos localStorage objet :

var localStorageSpace = function(){
        var allStrings = '';
        for(var key in window.localStorage){
            if(window.localStorage.hasOwnProperty(key)){
                allStrings += window.localStorage[key];
            }
        }
        return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)';
    };

Le mien est revenu : "30.896484375 KB"

Answer 3

Vous pouvez obtenir la taille actuelle des données de stockage local à l'aide de la fonction Fonction Blob. Il se peut que cela ne fonctionne pas dans les anciens navigateurs, vérifiez la prise en charge de new Blob y Object.values() à la caniuse.

Ejemplo:

return new Blob(Object.values(localStorage)).size;

Object.values() transforme l'objet localStorage en tableau. Blob transforme le tableau en données brutes.

Answer 4

IE dispose d'un espace restant de l'objet Storage. Les autres navigateurs n'ont pas d'équivalent pour le moment.

Je crois que l'espace par défaut est de 5 Mo, mais je ne l'ai pas testé personnellement.

Answer 5

Voici un exemple simple exemple de la façon de procéder et devrait fonctionner avec tous les navigateurs

alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);