l'utilizzo dello spazio Calcolo localStorage

StackOverflow https://stackoverflow.com/questions/3027142

Domanda

Sto creando un app usando l'editor Bespin e localStorage di HTML5. Memorizza tutti i file in locale e aiuta con la grammatica, usa JSLint e alcuni altri parser per CSS e HTML per aiutare l'utente.

Voglio calcolare quanto il limite localStorage è stato utilizzato e quanto v'è in realtà. Questo è possibile oggi? che stavo pensando di non semplicemente di calcolare i bit memorizzati. Ma poi di nuovo io non sono sicuro di cosa altro c'è che non riesco a misurarmi.

È stato utile?

Soluzione 2

Non ho trovato un modo universale per ottenere il limite rimanente sui browser di cui avevo bisogno, ma ho scoperto che quando si fa raggiungere il limite v'è un messaggio di errore che si apre. Questo è di portate diverse in ogni browser.

Per max fuori ho usato questo piccolo script: 

for (var i = 0, data = "m"; i < 40; i++) {
    try { 
        localStorage.setItem("DATA", data);
        data = data + data;
    } catch(e) {
        var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
        console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
        console.log(e);
        break;
    }
}
localStorage.removeItem("DATA");

Da che ho ottenuto queste informazioni:

Google Chrome

  • DOMException:
    • Codice: 22
    • un messaggio: "Impossibile eseguire 'setItem' on 'bagagli':. Impostando il valore di 'Dati' superato la quota"
    • Nome: "QuotaExceededError"

Mozilla Firefox

  • DOMException:
    • Codice: 1014
    • un messaggio: "dimensione massima Persistent Storage raggiunto"
    • Nome: "NS_ERROR_DOM_QUOTA_REACHED"

Safari

  • DOMException:
    • Codice: 22
    • un messaggio: "QuotaExceededError: DOM Exception 22"
    • Nome: "QuotaExceededError"

Internet Explorer, Riva (comunità)

  • DOMException:
    • Codice: 22
    • un messaggio: "QuotaExceededError"
    • Nome: "QuotaExceededError"

La mia soluzione

Finora la mia soluzione è quella di aggiungere una chiamata in più ogni volta che l'utente avrebbe salvato nulla. E se l'eccezione e 'colto in poi vorrei dire loro che sono a corto di capacità di stoccaggio.

Modifica: Cancellare i dati aggiunti

Ho dimenticato di dire che per far funzionare tutto questo in realtà si avrebbe bisogno di eliminare l'elemento DATA che è stata impostata in origine. La modifica viene riflessa sopra utilizzando la funzione removeItem ().

Altri suggerimenti

Si può essere in grado di avere un'idea approssimativa utilizzando i metodi JSON per trasformare l'intero oggetto localStorage in una stringa JSON: 

JSON.stringify(localStorage).length

Non so come byte-accurate che sarebbe stato, in particolare con i pochi byte di markup aggiunto se si sta utilizzando oggetti addizionali - ma immagino che sia meglio che pensare che stai solo spingendo 28K e invece di fare 280K ( o viceversa).

IE8 implementa il remainingSpace proprietà per questo scopo: 

alert(window.localStorage.remainingSpace);  // should return 5000000 when empty

Purtroppo sembra che questo non è disponibile negli altri browser. Tuttavia non sono sicuro se attuano qualcosa di simile.

È possibile utilizzare la sotto la linea di calcolare con precisione questo valore e ecco un jsfiddle per l'illustrazione del suo uso 

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

imbattuto in questo oggi durante il test (quota di archiviazione superiore) e montata su una soluzione. IMO, sapendo che il limite è e dove siamo in relazione è molto meno importante di implementare un modo funzionale per continuare a memorizzare oltre la quota.

In questo modo, piuttosto che cercare di fare confronti tra le dimensioni e le verifiche di capacità, permette di reagire quando abbiamo colpito la quota, ridurre la nostra archiviazione corrente di un terzo, e riprendere la conservazione. Se detta riduzione non riesce, interrompere la memorizzazione. 

set: function( param, val ) { 
    try{
        localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
        localStorage.setItem( 'lastStore', new Date().getTime() )
    }
    catch(e){
      if( e.code === 22 ){
        // we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
        // and try again... If we fail to remove entries, lets silently give up
        console.log('Local storage capacity reached.')

        var maxLength = localStorage.length
          , reduceBy = ~~(maxLength / 3);

        for( var i = 0; i < reduceBy; i++ ){
          if( localStorage.key(0) ){
            localStorage.removeItem( localStorage.key(0) );
          }
          else break;
        }

        if( localStorage.length < maxLength ){
          console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
          public.set( param, value );
        }
        else {
          console.log('Could not reduce cache size. Removing session cache setting from this instance.');
          public.set = function(){}
        }
      }
    }
}

Questa funzione vite all'interno di un oggetto wrapper, in modo public.set semplicemente si definisce. Ora possiamo aggiungere allo stoccaggio e di non preoccuparsi che cosa la quota sia o quanto siamo vicini anche in questo. Se un unico negozio supera 1/3 ° le dimensioni della quota è dove questa funzione si fermerà abbattimento e chiudere la conservazione, e, a quel punto, non dovrebbe essere caching comunque, giusto?

Per aggiungere i risultati del test del browser:

Firefox i = 22.

Safari Versione 5.0.4 sul mio Mac non appendere. Errore come Chrome. i = 21.

Opera Informa l'utente che il sito vuole memorizzare i dati, ma non ha abbastanza spazio. L'utente può rifiutare la richiesta, il limite per l'importo richiesto o per diversi altri limiti, o impostarlo illimitato. Vai alla lirica: WebStorage dire se viene visualizzato questo messaggio o meno. i = 20. Errore gettato è lo stesso come Chrome.

IE9 modalità standard Errore come Chrome. i = 22.

IE9 in IE8 modalità standard Console messaggio "Errore: Memoria insufficiente è disponibile per completare questa operazione". i = 22

IE9 in modalità anziani Errore oggetto. i = 22.

IE8 Non avere una copia di prova, ma storage locale è supportato (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)

IE7 e seguente Non supporta la memorizzazione locale.

È possibile verificare il browser con questo web storage testare il supporto

Firefox sia sul mio tablet Android e Windows computer portatile e Chromium sulle finestre risultati:

  1. Firefox (Windows):

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : * non supportato

  2. Firefox (Android):

    • localStorage : 2560K char
    • sessionStorage : Unlimited (esattamente test viene eseguito fino a 10240k char == 20480k byte)
    • localStorage : non supportato

  3. Chromium (Windows):

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : non supportato

Aggiorna

In Google Chrome versione 52.0.2743.116 m (64-bit) limiti in cui un po 'più basso sui personaggi 5101k. Questa disposizione mezzi max potrebbe cambiare in versioni.

Vorrei poter aggiungere questo in un commento -. Non abbastanza rep, scusate

ho eseguito alcuni test di Potenza - in attesa JSON.stringify (localStorage) .length essere un op costoso in generale occupazione localStorage.

http://jsperf.com/occupied-localstorage-json-stringify-length

E 'davvero così - circa 50 volte più costoso di tenere traccia di quello che stai memorizzazione, e peggiora la più piena localStorage ottiene

.

Questa funzione ottiene il esattamente di archiviazione disponibile / sinistra:

Ho fatto una serie di funzioni utili per localStorage * qui *

http://jsfiddle.net/kzq6jgqa/3/ 

function getLeftStorageSize() {
    var itemBackup = localStorage.getItem("");
    var increase = true;
    var data = "1";
    var totalData = "";
    var trytotalData = "";
    while (true) {
        try {
            trytotalData = totalData + data;
            localStorage.setItem("", trytotalData);
            totalData = trytotalData;
            if (increase) data += data;
        } catch (e) {
            if (data.length < 2) break;
            increase = false;
            data = data.substr(data.length / 2);
        }
    }
    localStorage.setItem("", itemBackup);

    return totalData.length;
}

// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");

// to get the maximum possible *clear* the storage 
localStorage.clear();
var storageMax = getLeftStorageSize();

Nota, che questo non è molto veloce, in modo da non utilizzare tutto il tempo.

Con questo ho anche scoperto che:. Item-Name avrà lo stesso spazio come la sua lunghezza, la voce di valore prenderà anche lo stesso spazio come la loro lunghezza

massima di memoria ho avuto - tutto su 5M:

  • 5000000 caratteri - Bordo
  • 5242880 caratteri - Chrome
  • 5242880 caratteri - Firefox
  • 5000000 caratteri - IE

troverete un codice commentato out-nel violino di vedere i progressi nella console.

Mi ha portato un po 'di tempo per fare, speriamo che questo aiuta ☺

avevo bisogno di realtà simulare e testare ciò che il mio modulo farà quando lo stoccaggio è pieno, quindi avevo bisogno di ottenere una stretta di precisione quando la memoria è piena, piuttosto che la risposta accettata, che perde quella precisione ad una velocità di I ^ 2.

Ecco il mio script, che dovrebbe sempre produrre una precisione di 10 su quando viene raggiunto tappo di memoria, e abbastanza rapidamente, pur avendo alcune ottimizzazioni semplici ... EDIT: ho fatto la sceneggiatura migliore e con una precisione esatta: 

function fillStorage() {
    var originalStr = "1010101010";
    var unfold = function(str, times) {
        for(var i = 0; i < times; i++)
            str += str;
        return str;
    }
    var fold = function(str, times) {
        for(var i = 0; i < times; i++) {
            var mid = str.length/2;
            str = str.substr(0, mid);
        }
        return str;
    }

    var runningStr = originalStr;
    localStorage.setItem("filler", runningStr);
    while(true) {
        try {
            runningStr = unfold(runningStr, 1);
            console.log("unfolded str: ", runningStr.length)
            localStorage.setItem("filler", runningStr);
        } catch (err) {
            break;
        }
    }

    runningStr = fold(runningStr, 1);  
    var linearFill = function (str1) {
        localStorage.setItem("filler", localStorage.getItem("filler") + str1);
    }
    //keep linear filling until running string is no more...
    while(true) {
        try {
            linearFill(runningStr)
        } catch (err) {
            runningStr = fold(runningStr, 1);
            console.log("folded str: ", runningStr.length)
            if(runningStr.length == 0)
                break;
        }
    }

    console.log("Final length: ", JSON.stringify(localStorage).length)
}

Questa aiutare qualcuno potrebbe. In Chrome è possibile richiedere all'utente di consentire di utilizzare più spazio su disco, se necessario: 

// Request Quota (only for File System API)  
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
  window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
  console.log('Error', e); 
});

https://developers.google.com/chrome/whitepapers/storage#asking_more per maggiori informazioni. 

 try {
     var count = 100;
     var message = "LocalStorageIsNOTFull";
     for (var i = 0; i <= count; count + 250) {
         message += message;
         localStorage.setItem("stringData", message);
         console.log(localStorage);
         console.log(count);
     }

 }
 catch (e) {
     console.log("Local Storage is full, Please empty data");
     // fires When localstorage gets full
     // you can handle error here ot emply the local storage
 }
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top