Yana localStorage(şu anda) yalnızca değerler olarak dizeleri destekler ve nesneler saklanabilir önce dizgelenmiş (JSON-dize olarak saklanan) gerektiğini yapmak için, değerlerin uzunluğu konusunda tanımlanmış bir sınırlama yoktur.

Herkes tüm tarayıcılar için geçerli bir tanım olup olmadığını biliyor mu?

Web Depolama hakkındaki Wikipedia makalesinden alıntı :

Web depolama, çerezlerde bir iyileştirme olarak basit bir şekilde görüntülenebilir ve çok daha fazla depolama kapasitesi sağlar ( Google Chrome'da kaynak başına 10 MB ( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox ve Opera; Internet Explorer'da depolama alanı başına 10 MB ) ve daha iyi programlı arabirimler.

Ve ayrıca [Ocak 2007'de yayınlanan] John Resig makalesinden alıntılar :

Depolama alanı

DOM Depolama ile Çerezlere uygulanan tipik kullanıcı aracısı sınırlamalarından çok daha fazla depolama alanınız olduğu ima edilir. Ancak, sağlanan miktar şartnamede tanımlanmamıştır ve kullanıcı aracısı tarafından anlamlı bir şekilde yayınlanmamıştır.

Mozilla kaynak koduna bakarsanız, 5120KB'nin tüm alan için varsayılan depolama alanı boyutu olduğunu görebiliriz. Bu, tipik bir 2KB çerezden daha fazla çalışma alanı sağlar.

Bununla birlikte, bu depolama alanının boyutu kullanıcı tarafından özelleştirilebilir (böylece 5MB'lık bir depolama alanı garanti edilmez veya ima edilmez) ve kullanıcı aracısı (örneğin Opera, yalnızca 3MB sağlayabilir) - ancak sadece zaman söyleyecektir. )

Aslında Opera'nın 5MB sınırı yok. Uygulamalar daha fazlasını gerektirdiğinden limiti artırmayı teklif eder. Kullanıcı bir alan adı için "Sınırsız depolama alanı" seçebilir.

LocalStorage limitlerini / kotasını kendiniz kolayca test edebilirsiniz .

İşte sınırı bulmak için basit bir komut dosyası:

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

İşte özü , JSFiddle ve blog yazısı .

Komut dosyası, tarayıcı atıp istisna oluncaya kadar giderek daha büyük metin dizelerinin ayarını test edecektir. Bu noktada test verilerini temizler ve localStorage'da boyutu kilobayt olarak saklayan bir boyut anahtarı ayarlar.

Saklanabilecek tek bir dizenin maksimum uzunluğunu bulun localStorage

Bu snippet, localStoragealan adı başına depolanabilecek bir Dizenin maksimum uzunluğunu bulur .

//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>

JavaScript'te bir dizenin uzunluğunun sınırlı olduğunu unutmayın; localStoragetek bir dize ile sınırlandırılmadığında saklanabilecek maksimum veri miktarını görüntülemek istiyorsanız , bu cevaptaki kodu kullanabilirsiniz .

Düzenleme: Yığın Parçacıkları desteklemiyor localStorage, bu yüzden burada JSFiddle bağlantısı var .

Sonuçlar

Chrome (45.0.2454.101): 5242878 karakter
Firefox (40.0.1): 5242883 karakter
Internet Explorer (11.0.9600.18036) :16386 122066 122070 karakter

Internet Explorer'da her çalıştırmada farklı sonuçlar alıyorum.

Mobil tarayıcılar:

Browser    | Chrome    | Android Browser    | Firefox     | iOS Safari
Version    | 40        | 4.3                | 34          | 6-8
Available  | 10MB      | 2MB                | 10MB        | 5MB

Masaüstü tarayıcılar:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB

Referans Bağlantısı

5 MB kullanılabilir olduğunu varsaymayın - localStorage kapasitesi tarayıcıya göre değişir; en yaygın değerler 2,5 MB, 5 MB ve sınırsızdır. Kaynak: http://dev-test.nemikor.com/web-storage/support-test/

Büyük nesneleri tek bir localStorage girdisine dizmek istemezsiniz. Bu çok verimsiz olurdu - her ayrıntıda bir değişiklik olduğunda her şeyin ayrıştırılması ve yeniden kodlanması gerekir. Ayrıca, JSON bir nesne yapısı içinde birden fazla çapraz referansı işleyemez ve çok sayıda ayrıntıyı siler, örn. Yapıcı, dizilerin sayısal olmayan özellikleri, seyrek bir girişte olanlar, vb.

Bunun yerine, Rhaboo kullanabilirsiniz . Çok sayıda localStorage girişi kullanarak büyük nesneleri depolar, böylece hızlı bir şekilde küçük değişiklikler yapabilirsiniz. Geri yüklenen nesneler, kaydedilen nesnelerin çok daha doğru kopyalarıdır ve API inanılmaz derecede basittir. Örneğin:

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, ben yazdım.

Aşağıdakileri yapıyorum:

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

Cdmckay'ın cevabını gerçekten seviyorum , ancak gerçek zamanlı olarak boyutu kontrol etmek gerçekten iyi görünmüyor: çok yavaş (benim için 2 saniye). Bu, hatanın ne kadar büyük olabileceğini seçme seçeneği ile daha hızlı ve daha kesin olan geliştirilmiş sürümdür (varsayılan 250,000, daha küçük hata - hesaplama ne kadar uzun olursa):

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

Test etmek için:

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

Bu standart hata için çok daha hızlı çalışır; ayrıca gerektiğinde çok daha kesin olabilir.

Kullandığım bu işleve ikili bir testi yoğunlaştırdım:

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

Ayrıca, test etmeden önce içeriği yedekler, ardından geri yükler.

Nasıl çalışır: Sınıra ulaşılana veya test başarısız olana kadar boyutu ikiye katlar. Daha sonra düşük ve yüksek arasındaki mesafenin yarısını saklar ve her seferinde yarının yarısını çıkarır / ekler (başarısızlıktan çıkar ve başarıya eklenir); uygun değere honlama.

upperLimitvarsayılan olarak 1 GB'dir ve ikili aramaya başlamadan önce üstel olarak ne kadar yukarı taranacağını sınırlar. Bunun değiştirilmesi gerekeceğinden şüpheliyim, ama hep ileriyi düşünüyorum. ;)

Chrome'da:

> 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 ve FireFox da aynı maksimum boyutu (10485762 bayt) bildirir.

Depolama kotasını (toplam ve kullanılmış) gerçek zamanlı olarak verimli bir şekilde kontrol etmek için modern tarayıcılarda aşağıdaki kodu kullanabilirsiniz:

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

Bir kez Chrome (masaüstü tarayıcı) uzantısını geliştirdim ve bu nedenle Yerel Depolama gerçek maksimum boyutunu test ettim .

Benim sonuçlarım:

Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)

10240 KBKullanımdan daha fazlası bana hata verdi:

Yakalanmayan DOMException: 'Depolama' öğesinde 'setItem' yürütülemedi: 'Notes' değerinin ayarlanması kotayı aştı.

Bayt cinsinden localStorage boyutunu test eden bu basit kodu yazdım.

https://github.com/gkucmierz/Test-of-localStorage-limits-quota

const check = bytes => {
  try {
    localStorage.clear();
    localStorage.setItem('a', '0'.repeat(bytes));
    localStorage.clear();
    return true;
  } catch(e) {
    localStorage.clear();
    return false;
  }
};

Github sayfaları:

https://gkucmierz.github.io/Test-of-localStorage-limits-quota/

~ 5Mbytes olan masaüstü krom, opera, firefox, cesur ve mobil kromda aynı sonuçları aldım

Ve yarı küçük safari ile sonuçlanır ~ 2Mbytes