حساب استخدام مساحة محلية

Question

أقوم بإنشاء تطبيق باستخدام محرر Bespin و LocalStorage HTML5. إنه يخزن جميع الملفات محليًا ويساعد في القواعد ، ويستخدم JSLint وبعض المحلات الأخرى لـ CSS و HTML لمساعدة المستخدم.

أرغب في حساب مقدار الحد الأقصى المحلي الذي تم استخدامه ومقدار ما هو موجود بالفعل. هل هذا ممكن اليوم؟ كنت أفكر في عدم حساب البتات التي يتم تخزينها ببساطة. لكن مرة أخرى ، لست متأكدًا من ما هو أكثر من لا يمكنني قياس نفسي.

Answer 1

لم أجد طريقة عالمية للحصول على الحد المتبقي على المتصفحات التي أحتاجها ، لكنني اكتشفت أنه عندما تصل إلى الحد الأقصى ، توجد رسالة خطأ تنبثق. هذا يختلف من الدورة في كل متصفح.

إلى حد أقصى ، استخدمت هذا البرنامج النصي الصغير:

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

من ذلك حصلت على هذه المعلومات:

جوجل كروم

• Domexception:
  • الكود: 22
  • الرسالة: "فشل في تنفيذ" SetItem "على" التخزين ": تجاوز قيمة" البيانات "في الحصة".
  • الاسم: "حصة ExcedeDerror"

موزيلا فايرفوكس

• Domexception:
  • الكود: 1014
  • الرسالة: "تم الوصول إلى الحد الأقصى لحجم التخزين المستمر"
  • الاسم: "ns_error_dom_quota_reached"

سفاري

• Domexception:
  • الكود: 22
  • الرسالة: "حصة ExcedeDerror: DOM استثناء 22"
  • الاسم: "حصة ExcedeDerror"

Internet Explorer ، Edge (تواصل اجتماعي)

• Domexception:
  • الكود: 22
  • الرسالة: "حصة ExcedeDerror"
  • الاسم: "حصة ExcedeDerror"

---

بلدي الحل

حتى الآن هو الحل الخاص بي هو إضافة مكالمة إضافية في كل مرة يقوم فيها المستخدم بحفظ أي شيء. وإذا تم القبض على الاستثناء ، فسأخبرهم أنهم ينفدون من سعة التخزين.

---

تحرير: حذف البيانات المضافة

لقد نسيت أن أذكر ذلك لكي تعمل في الواقع ، ستحتاج إلى حذف DATA العنصر الذي تم تعيينه في الأصل. ينعكس التغيير أعلاه باستخدام إزالة بند() وظيفة.

Answer 2

قد تكون قادرًا على الحصول على فكرة تقريبية باستخدام أساليب JSON لتحويل كائن LocalStorage بالكامل إلى سلسلة JSON:

JSON.stringify(localStorage).length

لا أعرف كيف سيكون دقة البايت ، خاصةً مع بايت بايت من العلامات المضافة إذا كنت تستخدم كائنات إضافية- لكنني أعتقد أنه من الأفضل أن تفكر في أنك تدفع 28 ألفًا فقط وبدلاً من ذلك ، تقوم بـ 280 ألفًا (أو نائب- بالعكس).

Answer 3

IE8 ينفذ remainingSpace الممتلكات لهذا الغرض:

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

لسوء الحظ ، يبدو أن هذا غير متوفر في المتصفحات الأخرى. ومع ذلك ، لست متأكدًا مما إذا كانوا ينفذون شيئًا مشابهًا.

Answer 4

يمكنك استخدام السطر أدناه لحساب هذه القيمة بدقة و هنا jsfiddle للحصول على توضيح لاستخدامه

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

Answer 5

ركض في هذا اليوم أثناء اختبار (تجاوز حصة التخزين) ورفع حلًا. IMO ، معرفة ما هو الحد الأقصى وأين نحن في العلاقة هو أقل قيمة بكثير من تنفيذ طريقة وظيفية لمواصلة التخزين خارج الحصص.

وبالتالي ، بدلاً من محاولة إجراء مقارنات الحجم وفحوصات السعة ، يتيح الرد عندما نصل إلى الحصة ، وتقليل التخزين الحالي بمقدار الثلث ، واستئناف التخزين. إذا فشل التخفيض المذكور ، توقف عن التخزين.

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

تعيش هذه الوظيفة داخل كائن غلاف ، لذلك تدعو نفسها ببساطة. الآن يمكننا أن نضيف إلى التخزين ولا تقلق ما هي الحصة أو مدى قربنا من ذلك. إذا كان هناك متجر واحد يتجاوز 1/3 ، فإن حجم الحصص هو المكان الذي ستتوقف فيه هذه الوظيفة عن إعدام وتوقف التخزين ، وفي هذه المرحلة ، لا ينبغي أن تتخزين مؤقتًا على أي حال ، أليس كذلك؟

Answer 6

للإضافة إلى نتائج اختبار المتصفح:

ثعلب النارأنا = 22.

سفاريالإصدار 5.0.4 على جهاز Mac الخاص بي لم يتم تعليقه. خطأ مثل الكروم. أنا = 21.

الأوبرايخبر المستخدم أن الموقع يريد تخزين البيانات ولكن ليس لديه مساحة كافية. يمكن للمستخدم رفض الطلب ، أو الحد الأقصى للمبلغ المطلوب أو إلى عدة حدود أخرى ، أو تعيينه على غير محدود. انتقل إلى Opera: WebStorage ليقول ما إذا كانت هذه الرسالة تظهر أم لا. أنا = 20. خطأ ألقا هو نفس الكروم.

وضع المعايير IE9خطأ مثل الكروم. أنا = 22.

IE9 في وضع معايير IE8رسالة وحدة التحكم "خطأ: لا يتوفر مساحة تخزين كافية لإكمال هذه العملية". أنا = 22

IE9 في أوضاع أقدمخطأ الكائن. أنا = 22.

IE8لا تملك نسخة للاختبار ، ولكن يتم دعم التخزين المحلي (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-ox-in-localstorage)

IE7 وتحتلا تدعم التخزين المحلي.

Answer 7

يمكنك اختبار متصفحك مع هذا اختبار دعم تخزين الويب

اختبرت ثعلب النار على كل من جهاز الكمبيوتر اللوحي Android و Windows المحمول و الكروم فقط على نتائج Windows:

1. ثعلب النار(شبابيك):

   • التخزين المحلي: 5120K Char
   • SessionStorage: 5120K Char
   • التخزين المحلي: *غير مدعوم

2. ثعلب النار(ذكري المظهر):

   • التخزين المحلي: 2560k شار
   • SessionStorage: Unlimited (اختبار بالضبط ما يصل إلى 10240K char == 20480K بايت)
   • التخزين المحلي: غير مدعوم

3. الكروم(شبابيك):

   • التخزين المحلي: 5120K Char
   • SessionStorage: 5120K Char
   • التخزين المحلي: غير مدعوم

تحديث

على Google Chrome الإصدار 52.0.2743.116 م (64 بت) حيث أقل قليلاً 5101k الشخصيات. هذا يعني أن الحد الأقصى المتاح قد يتغير في الإصدارات.

Answer 8

أتمنى أن أتمكن من إضافة هذا في تعليق - لا يكفي مندوب ، آسف.

قمت بإجراء بعض اختبارات Perf - أتوقع json.stringify (LocalStorage). الطول ليكون OP باهظ الثمن في شغل LocalStorage كبير.

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

إنه بالفعل - حوالي 50x أغلى من تتبع ما تقوم بتخزينه ، ويزداد سوءًا ، حيث يحصل LocalStorage على أسوأ.

Answer 9

هذه الوظيفة تحصل على بالضبط التخزين المتاح / اليسار:

لقد صنعت مجموعة من الوظائف المفيدة لـ LocalStorage *هنا*

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

لاحظ أن هذا ليس سريعًا جدًا ، لذلك لا تستخدمه طوال الوقت.

مع هذا ، اكتشفت أيضًا أن: اسم العنصر سيشغل مساحة أكبر من طوله ، فإن قيمة العنصر ستشغل مساحة كبيرة مثل طولها.

الحد الأقصى للتخزين الذي حصلت عليه - كل ما يقرب من 5 أمتار:

• 5000000 chars - الحافة
• 5242880 chars - Chrome
• 5242880 chars - Firefox
• 5000000 chars - أي

ستجد بعض التعليمات البرمجية الخارجية في الكمان لمعرفة التقدم في وحدة التحكم.

استغرقني بعض الوقت لأجعله ، آمل أن يساعد هذا ☺

Answer 10

كنت بحاجة إلى محاكاة واختبار ما ستفعله الوحدة النمطية عندما يكون التخزين ممتلئًا ، لذلك كنت بحاجة إلى الحصول على دقة وثيقة عندما تكون التخزين ممتلئة ، بدلاً من الإجابة المقبولة ، والتي تفقد تلك الدقة بمعدل I^2.

إليكم البرنامج النصي الخاص بي ، والذي يجب أن ينتج دائمًا دقة 10 عند الوصول إلى غطاء الذاكرة ، وبسرعة إلى حد ما على الرغم من وجود بعض التحسينات السهلة ... تحرير: لقد جعلت البرنامج النصي بشكل أفضل وبدقة دقيقة:

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

Answer 11

هذا قد يساعد شخص ما. في Chrome من الممكن أن تطلب من المستخدم السماح باستخدام المزيد من مساحة القرص إذا لزم الأمر:

// 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 لمزيد من المعلومات.

Answer 12

 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
 }