लोकलस्टोरेज स्पेस के उपयोग की गणना

Question 1

मैं Bespin संपादक और HTML5 के लोकलस्टोरेज का उपयोग करके एक ऐप बना रहा हूं। यह सभी फाइलों को स्थानीय रूप से संग्रहीत करता है और व्याकरण के साथ मदद करता है, उपयोगकर्ता की सहायता के लिए CSS और HTML के लिए JSLint और कुछ अन्य पार्सर का उपयोग करता है।

मैं गणना करना चाहता हूं कि स्थानीयस्टोरेज सीमा का कितना उपयोग किया गया है और वास्तव में कितना है। क्या आज यह संभव है? मैं केवल संग्रहीत बिट्स की गणना नहीं करने के लिए सोच रहा था। लेकिन फिर मुझे यकीन नहीं है कि वहाँ और क्या है जो मैं खुद को माप नहीं सकता हूं।

Question 2

आप JSON स्ट्रिंग के लिए संपूर्ण स्थानीयस्टोरेज ऑब्जेक्ट को चालू करने के लिए JSON विधियों का उपयोग करके एक अनुमानित विचार प्राप्त करने में सक्षम हो सकते हैं:

JSON.stringify(localStorage).length

मुझे नहीं पता कि बाइट-सटीक यह कैसे होगा, खासकर अतिरिक्त मार्कअप के कुछ बाइट्स के साथ यदि आप अतिरिक्त वस्तुओं का उपयोग कर रहे हैं - लेकिन मुझे लगता है कि यह सोचने से बेहतर है कि आप केवल 28K को धक्का दे रहे हैं और बजाय 280K (या इसके-) कर रहे हैं श्लोक)।

Question 3

मुझे उन ब्राउज़र पर शेष सीमा प्राप्त करने का एक सार्वभौमिक तरीका नहीं मिला, लेकिन मुझे पता चला कि जब आप सीमा तक पहुंचते हैं तो एक त्रुटि संदेश होता है जो पॉप अप होता है। यह प्रत्येक ब्राउज़र में अलग-अलग है।

इसे अधिकतम करने के लिए मैंने इस छोटी स्क्रिप्ट का उपयोग किया:

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
- संदेश: "'संग्रहण' पर 'सेट इट' निष्पादित करने में विफल: 'डेटा' का मान सेट करना कोटा से अधिक है।"
- नाम: "कोटा से आगे बढ़े"

मोज़िला फ़ायरफ़ॉक्स

DOMException:
- कोड: 1014
- संदेश: "लगातार भंडारण अधिकतम आकार तक पहुँच गया"
- नाम: "NS_ERROR_DOM_QUOTA_REACHED"

सफारी

DOMException:
- कोड: 22
- संदेश: "QuotaExceededError: DOM अपवाद 22"
- नाम: "कोटा से आगे बढ़े"

इंटरनेट एक्सप्लोरर, एज (समुदाय)

DOMException:
- कोड: 22
- संदेश: "QuotaExceededError"
- नाम: "कोटा से आगे बढ़े"

मेरा समाधान

अब तक मेरा समाधान हर बार एक अतिरिक्त कॉल जोड़ने का है, जब उपयोगकर्ता कुछ भी बचाएगा। और अगर अपवाद पकड़ा गया तो मैं उन्हें बताऊंगा कि वे भंडारण क्षमता से बाहर चल रहे हैं।

संपादित करें: जोड़े गए डेटा को हटाएं

मैं यह उल्लेख करना भूल गया कि इसके लिए वास्तव में काम करने के लिए आपको उस DATAआइटम को हटाना होगा जो मूल रूप से सेट किया गया था। परिवर्तन को itItem () फ़ंक्शन का उपयोग करके ऊपर परिलक्षित किया जाता है ।

Question 4

IE8 remainingSpaceइस उद्देश्य के लिए संपत्ति को लागू करता है:

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

दुर्भाग्य से ऐसा लगता है कि यह अन्य ब्राउज़रों में उपलब्ध नहीं है। हालांकि मुझे यकीन नहीं है कि वे कुछ इसी तरह लागू करते हैं।

Question 5

आप इस मूल्य की सही गणना करने के लिए नीचे की पंक्ति का उपयोग कर सकते हैं और यहां इसके उपयोग के चित्रण के लिए एक jsfiddle है

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

Question 6

परीक्षण (भंडारण कोटा से अधिक) के दौरान आज इसमें भाग लिया और एक समाधान को मार दिया। आईएमओ, यह जानते हुए कि सीमा क्या है और हम कहां संबंध में हैं, कोटा से परे भंडारण जारी रखने के लिए एक कार्यात्मक तरीका लागू करने की तुलना में बहुत कम मूल्यवान है।

इस प्रकार, आकार की तुलना और क्षमता जांच करने की कोशिश करने के बजाय, जब हम कोटा से टकराते हैं तो प्रतिक्रिया देते हैं, हमारे वर्तमान भंडारण को एक तिहाई कम करते हैं, और भंडारण फिर से शुरू करते हैं। यदि कहा जाए कि कमी विफल हो जाती है, तो भंडारण बंद कर दें।

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

यह फ़ंक्शन एक आवरण ऑब्जेक्ट के भीतर रहता है, इसलिए public.set केवल खुद को कॉल करता है। अब हम भंडारण में जोड़ सकते हैं और चिंता नहीं कर सकते कि कोटा क्या है या हम कितने करीब हैं। यदि कोई एकल स्टोर 1 / 3rd से अधिक है, तो कोटा आकार वह है जहाँ यह कार्य बंद हो जाएगा और भंडारण छोड़ दिया जाएगा, और उस बिंदु पर, आपको वैसे भी कैशिंग नहीं करना चाहिए?

Question 7

ब्राउज़र परीक्षा परिणामों में जोड़ने के लिए:

फ़ायरफ़ॉक्स i = 22।

मेरे मैक पर सफारी संस्करण 5.0.4 लटका नहीं था। क्रोम के रूप में त्रुटि। मैं = २१।

ओपेरा उस उपयोगकर्ता को बताता है कि वेबसाइट डेटा संग्रहीत करना चाहती है लेकिन उसके पास पर्याप्त स्थान नहीं है। उपयोगकर्ता अनुरोध को अस्वीकार कर सकता है, आवश्यक राशि तक या कई अन्य सीमाओं तक, या इसे असीमित पर सेट कर सकता है। यह संदेश प्रकट होता है या नहीं, यह कहने के लिए ओपेरा: वेबस्टोर पर जाएं। मैं = २०। त्रुटि को क्रोम के समान ही फेंक दिया गया है।

IE9 मानकों क्रोम के रूप में त्रुटि मोड । मैं = २२।

IE8 में IE9 मानक मोड कंसोल संदेश "त्रुटि: इस ऑपरेशन को पूरा करने के लिए पर्याप्त भंडारण उपलब्ध नहीं है"। मैं = २२

IE9 पुराने मोड ऑब्जेक्ट त्रुटि में। मैं = २२।

IE8 के पास परीक्षण के लिए एक प्रति नहीं है, लेकिन स्थानीय भंडारण समर्थित है (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)

IE7 और नीचे स्थानीय भंडारण का समर्थन नहीं करता है।

Question 8

आप अपने ब्राउज़र को इस वेब स्टोरेज सपोर्ट टेस्ट के साथ टेस्ट कर सकते हैं

मैंने अपने एंड्रॉइड टैबलेट और विंडोज़ लैपटॉप और क्रोमियम दोनों पर फ़ायरफ़ॉक्स का परीक्षण विंडोज़ के परिणामों पर किया:

फ़ायरफ़ॉक्स (विंडोज़):
- localStorage : 5120k चार
- sessionStorage : 5120k चार
- स्थानीयस्टोरेज : * समर्थित नहीं
फ़ायरफ़ॉक्स (Android):
- localStorage : 2560k चार
- sessionStorage : असीमित (वास्तव में परीक्षण 10240k char == 20480k बाइट तक चलता है)
- स्थानीयस्टोरेज : समर्थित नहीं है
क्रोमियम (खिड़कियां):
- localStorage : 5120k चार
- sessionStorage : 5120k चार
- स्थानीयस्टोरेज : समर्थित नहीं है

अपडेट करें

Google Chrome संस्करण पर 52.0.2743.116 मीटर (64-बिट) सीमा जहां 5101kवर्णों पर थोड़ा कम है । इसका मतलब है कि अधिकतम उपलब्ध संस्करण में बदलाव हो सकता है।

Question 9

काश मैं इसे एक टिप्पणी में जोड़ सकता - पर्याप्त प्रतिनिधि नहीं, क्षमा करें।

मैंने कुछ संपूर्ण परीक्षण चलाए - JSON.stringify (localStorage) की अपेक्षा करना। बड़े लोकलस्टोरेज ऑक्यूपेंसी में एक महंगी सेशन होना।

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

यह वास्तव में ऐसा है - जो आप स्टोर कर रहे हैं, उस पर नज़र रखने की तुलना में लगभग 50 गुना अधिक महंगा है, और फुलर लोकलस्टेज को खराब हो जाता है।

Question 10

इस फ़ंक्शन को सटीक भंडारण उपलब्ध / छोड़ दिया जाता है:

मैंने लोकलस्ट्रेज * के लिए उपयोगी कार्यों का एक सूट बनाया है यहां *

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

ध्यान दें, यह बहुत जल्दी नहीं है, इसलिए हर समय इसका उपयोग न करें।

इससे मुझे यह भी पता चला कि: आइटम-नाम अपनी लंबाई जितनी जगह लेगा, आइटम-मूल्य भी उतनी ही जगह लेगा, जितनी उनकी लंबाई।

अधिकतम संग्रहण मुझे मिला - सभी 5M के बारे में:

5000000 चार्ट - एज
5242880 चार्ट - क्रोम
5242880 चार्ट - फ़ायरफ़ॉक्स
5000000 चार्ट - IE

कंसोल में प्रगति देखने के लिए आपको फिडल में कुछ आउट-कमेंटेड कोड मिलेंगे।

बनाने के लिए मुझे कुछ समय दिया, आशा है कि यह मदद करता है to

Question 11

 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
 }

Question 12

मुझे वास्तव में अनुकरण करने और परीक्षण करने की आवश्यकता है कि मेरा मॉड्यूल भंडारण पूर्ण होने पर क्या करेगा, इसलिए मुझे स्वीकार किए गए उत्तर के बजाय भंडारण पूर्ण होने पर एक करीबी परिशुद्धता प्राप्त करने की आवश्यकता थी, जो i ^ 2 की दर से उस परिशुद्धता को खो देता है।

यहां मेरी स्क्रिप्ट है, जिसे मेमोरी कैप तक पहुंचने पर हमेशा 10 की परिशुद्धता का उत्पादन करना चाहिए, और कुछ आसान अनुकूलन होने के बावजूद काफी जल्दी ... EDIT: मैंने स्क्रिप्ट को बेहतर और सटीक सटीकता के साथ बनाया है:

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

Question 13

यह किसी की मदद कर सकता है। यदि आवश्यक हो तो क्रोम से उपयोगकर्ता को अधिक डिस्क स्थान का उपयोग करने की अनुमति देने के लिए कहना संभव है:

// 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 अधिक जानकारी के लिए।