HTML5 लोकल स्टोरेज कमबैक समाधान [बंद]


119

मैं जावास्क्रिप्ट पुस्तकालयों और कोड की तलाश कर रहा हूं जो उन localStorageब्राउज़रों पर अनुकरण कर सकते हैं जिनके पास मूल समर्थन नहीं है।

असल में, मैं अपनी साइट localStorageको डेटा स्टोर करने के लिए उपयोग करना चाहता हूं और जानता हूं कि यह अभी भी उन ब्राउज़रों पर काम करेगा जो मूल रूप से इसका समर्थन नहीं करते हैं। इसका मतलब यह है कि एक पुस्तकालय पता लगाएगा कि क्या window.localStorageमौजूद है और यदि वह इसका उपयोग करता है। यदि यह मौजूद नहीं है, तो यह window.localStorageनाम स्थान में अपना स्वयं का कार्यान्वयन बनाकर, स्थानीय भंडारण की किसी प्रकार की गिरावट विधि का निर्माण करेगा ।

अब तक, मुझे ये उपाय मिले हैं:

  1. सरल सत्रस्टेज कार्यान्वयन।
  2. एक कार्यान्वयन जो कुकीज़ का उपयोग करता है (इस विचार से रोमांचित नहीं)।
  3. Dojo का dojox.storage , लेकिन यह खुद की चीज है, वास्तव में गिरावट नहीं है।

मैं समझता हूं कि फ्लैश और सिल्वरलाइट का उपयोग स्थानीय भंडारण के लिए भी किया जा सकता है, लेकिन उन्हें मानक HTML5 लोकलस्टोरेज के लिए गिरावट के रूप में उपयोग करने पर कुछ भी नहीं मिला है। शायद Google गियर्स में भी यह क्षमता है?

कृपया अपने द्वारा पाए गए किसी भी संबंधित लाइब्रेरी, संसाधन, या कोड स्निपेट साझा करें! मुझे विशेष रूप से शुद्ध जावास्क्रिप्ट या jquery- आधारित समाधानों में दिलचस्पी होगी, लेकिन मुझे लगता है कि संभावना नहीं है।


sessionStorage और localStorage वेब संग्रहण युक्ति ( dev.w3.org/html5/webstorage ) का हिस्सा है। केवल अंतर यह है कि ब्राउज़र कितनी देर तक डेटा रखेगा। मुझे लगता है कि आपको एक कार्यान्वयन नहीं मिलेगा जहां आपके पास एक है, लेकिन अन्य नहीं (लेकिन मैं 100% निश्चित नहीं हूं)
rlovtang

1
यह उल्लेखनीय है कि गियर्स को पिछले फरवरी में आधिकारिक तौर पर हटा दिया गया था - मैं इस पर कुछ भी नहीं बनाऊंगा
जोश 3736

@lolovtang: धन्यवाद, मैं सत्र और स्थानीय भंडारण के बीच के अंतर से अवगत हूं। 24ways.org लेख (प्रश्न में पहला लिंक, समाधान # 1) के अनुसार, क्रोम केवल लोकलस्टोरेज का समर्थन करता है न कि सेशनस्टोरेज का। शायद अब ऐसा नहीं है, क्योंकि यह लेख कुछ समय पहले लिखा गया था।
टॉरेन

@ josh3736: हाँ, मैं व्यक्तिगत रूप से कुकीज़ और गियर के उपयोग से बचना चाहूंगा। मैं निश्चित रूप से इस पर निर्भर कुछ भी नहीं बनाऊंगा, लेकिन अगर यह किसी ऐसे व्यक्ति के लिए एक बैकबैक स्टोरेज मैकेनिज्म था, जो इसे स्थापित कर चुका था, और मैंने इसे सीधे कोड नहीं किया, तो इसका उपयोग किया जा सकता था।
टॉरेन

इसलिए मैं वास्तव में गलत था :) पता नहीं था कि क्रोम को एक बार लोकलस्टोरेज के लिए सपोर्ट था लेकिन सेशनस्टोरेज को नहीं। क्रोम के पास अब कम से कम दोनों के लिए समर्थन है।
रलवटेंग

जवाबों:


56

मैं PersistJS ( github रिपॉजिटरी ) का उपयोग करता हूं , जो क्लाइंट-साइड स्टोरेज को आपके कोड के लिए मूल और पारदर्शी रूप से संभालता है। आप एकल API का उपयोग करते हैं और निम्नलिखित बैकएंड के लिए समर्थन प्राप्त करते हैं:

  • फ्लैश: फ्लैश 8 लगातार भंडारण।
  • गियर: Google गियर्स-आधारित निरंतर संग्रहण।
  • स्थानीयस्टोरेज: HTML5 ड्राफ्ट स्टोरेज।
  • whatwg_db: HTML5 ड्राफ्ट डेटाबेस स्टोरेज।
  • Globalstorage: HTML5 ड्राफ्ट स्टोरेज (पुराना चश्मा)।
  • यानी: इंटरनेट एक्सप्लोरर यूजरडेटा व्यवहार।
  • कुकी: कुकी-आधारित निरंतर भंडारण।

उनमें से कोई भी अक्षम किया जा सकता है - यदि, उदाहरण के लिए, आप कुकीज़ का उपयोग नहीं करना चाहते हैं। इस लाइब्रेरी के साथ, आपको IE 5.5+, फ़ायरफ़ॉक्स 2.0+, सफारी 3.1+ और क्रोम में देशी क्लाइंट-साइड स्टोरेज सपोर्ट मिलेगा; और यदि ब्राउज़र में फ्लैश या गियर्स है तो प्लग-असिस्टेड सपोर्ट। यदि आप कुकीज़ को सक्षम करते हैं, तो यह सब कुछ में काम करेगा (लेकिन 4 केबी तक सीमित होगा)।


10
क्या PersistJS अभी भी समर्थित है? मैं सोच रहा हूँ कि यह कैसे एक समस्या को हल करता है जहाँ ब्राउज़र उन्नत हो जाता है और चुनी हुई संग्रहण विधि बदल जाती है (कहते हैं कि स्थानीय भंडारण उपलब्ध हो जाता है)। क्या पुराना स्थान सुलभ हो गया है?
jcalfee314

2
यह कम से कम ऐसा नहीं लगता कि यह अब सक्रिय विकास में है।
Mahn

यह बहुत साहसी पुस्तकालय है। सबसे प्रौद्योगिकियों में अधिकतम आकार के बारे में किसी भी ज्ञान के बिना हमें यह अनुमान लगाना चाहिए कि हमारा ऐप बहुत अधिक भाग्य के साथ चलता है ... इसके अलावा यह केवल एक समाधान प्रतीत होता है यदि आप <64KB को बचाना चाहते हैं।
यार

@julmot यही एक पुस्तकालय है। थकाऊ सामान को दूर करते हुए सुविधा प्रदान करें। पर्याप्त अनुसंधान और समय के साथ, आप आमतौर पर यह पता लगा सकते हैं कि अधिकतम आकार की परवाह किए बिना, इसे कैसे काम किया जाए। बेशक, ऐसा लगता है कि उस परियोजना के लेखक ने फैसला किया कि यह बहुत ज्यादा था ...
विलियम

क्या आपको पता है कि यह सफारी प्राइवेट ब्राउजिंग मोड के साथ काम करता है? वर्तमान में मुझे एक मुद्दा मिल रहा है जहां Safari और निजी दोनों तरह के MacOS और iOS में लोकलस्टोरेज समर्थित नहीं है।
ऑस्टिन

61

शुद्ध जेएस आधारित सरल स्थानीय सामग्री पॉलीफिल:

डेमो: http://jsfiddle.net/aamir/S4X35/

HTML:

<a href='#' onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br/>
<a href='#' onclick="alert(store.get('foo'))">get key: foo</a><br/>
<a href='#' onclick="store.del('foo')">delete key: foo</a>​

जे एस:

window.store = {
    localStoreSupport: function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    },
    set: function(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else {
            var expires = "";
        }
        if( this.localStoreSupport() ) {
            localStorage.setItem(name, value);
        }
        else {
            document.cookie = name+"="+value+expires+"; path=/";
        }
    },
    get: function(name) {
        if( this.localStoreSupport() ) {
            var ret = localStorage.getItem(name);
            //console.log(typeof ret);
            switch (ret) {
              case 'true': 
                  return true;
              case 'false':
                  return false;
              default:
                  return ret;
            }
        }
        else {
            // cookie fallback
            /*
             * after adding a cookie like
             * >> document.cookie = "bar=test; expires=Thu, 14 Jun 2018 13:05:38 GMT; path=/"
             * the value of document.cookie may look like
             * >> "foo=value; bar=test"
             */
            var nameEQ = name + "=";  // what we are looking for
            var ca = document.cookie.split(';');  // split into separate cookies
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];  // the current cookie
                while (c.charAt(0)==' ') c = c.substring(1,c.length);  // remove leading spaces
                if (c.indexOf(nameEQ) == 0) {  // if it is the searched cookie
                    var ret = c.substring(nameEQ.length,c.length);
                    // making "true" and "false" a boolean again.
                    switch (ret) {
                      case 'true':
                          return true;
                      case 'false':
                          return false;
                      default:
                          return ret;
                    }
                }
            }
            return null; // no cookie found
        }
    },
    del: function(name) {
        if( this.localStoreSupport() ) {
            localStorage.removeItem(name);
        }
        else {
            this.set(name,"",-1);
        }
    }
}​

4
इसे मान्यता क्यों नहीं मिल रही है !? धन्यवाद दोस्त!
राबर्ट

4
:) - मुझे अपनी जरूरत की हर चीज के लिए एक संपूर्ण देयता जोड़ना पसंद नहीं है।
आमिर अफरीदी

2
क्या इसे जावास्क्रिप्ट में var expiresस्थानीय और फिर उपयोगकर्ता को अन्य दायरे में परिभाषित करने की अनुमति है ? समारोह मेंset
happy_marmoset

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

1
निजी मोड में @MohsinSaeed, मुझे लगता है कि ब्राउज़र आपको कुकीज़ भी नहीं बनाने देगा। superuser.com/questions/589248/…
आमिर अफरीदी

19

क्या आपने मॉर्डनिज़र विकी पर पॉलीफ़िल पृष्ठ देखा है?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

उस पृष्ठ पर वेबस्टोर अनुभाग देखें और आपको 10 संभावित समाधान दिखाई देंगे (जुलाई 2011 तक)।

सौभाग्य! निशान


1
ऐसा लगता है कि उनमें से कोई भी निजी / गुप्त मोड (जैसे सफारी या क्रोम) में काम नहीं कर रहा है, क्योंकि उनका वर्कअराउंड कुकीज़ बना रहा है, जो उस मोड में भी अक्षम है।
एलेक्स

14

नीचे आमिर अफरीदी की प्रतिक्रिया का एक संक्षिप्त संस्करण है जो स्थानीय दायरे में अपने सभी कोड को संक्षिप्त रखता है।

मैंने उन संदर्भों को हटा दिया है जो एक वैश्विक retचर बनाते हैं और संग्रहित "सही" और "झूठे" तार के बूल मूल्यों में पार्सिंग को हटा दिया हैBrowserStorage.get() विधि के , जिससे समस्या हो सकती है यदि कोई वास्तव में तार को "सही" स्टोर करने की कोशिश कर रहा है या "असत्य"।

चूंकि स्थानीय भंडारण एपीआई केवल स्ट्रिंग मानों का समर्थन करता है, इसलिए कोई भी जावास्क्रिप्ट डेटा को अपने उचित डेटा प्रकारों के साथ-साथ JSON स्ट्रिंग में एन्कोडिंग द्वारा जावास्क्रिप्ट चर डेटा को संग्रहीत / पुनः प्राप्त कर सकता है, जिसे तब JSON एन्कोड / डिकोड लाइब्रेरी जैसे https का उपयोग करके डिकोड किया जा सकता है : //github.com/douglascrockford/JSON-js

var BrowserStorage = (function() {
    /**
     * Whether the current browser supports local storage as a way of storing data
     * @var {Boolean}
     */
    var _hasLocalStorageSupport = (function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    })();

    /**
     * @param {String} name The name of the property to read from this document's cookies
     * @return {?String} The specified cookie property's value (or null if it has not been set)
     */
    var _readCookie = function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    };

    /**
     * @param {String} name The name of the property to set by writing to a cookie
     * @param {String} value The value to use when setting the specified property
     * @param {int} [days] The number of days until the storage of this item expires
     */
    var _writeCookie = function(name, value, days) {
        var expiration = (function() {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days*24*60*60*1000));
                return "; expires=" + date.toGMTString();
            }
            else {
                return "";
            }
        })();

        document.cookie = name + "=" + value + expiration + "; path=/";
    };

    return {
        /**
         * @param {String} name The name of the property to set
         * @param {String} value The value to use when setting the specified property
         * @param {int} [days] The number of days until the storage of this item expires (if storage of the provided item must fallback to using cookies)
         */
        set: function(name, value, days) {
            _hasLocalStorageSupport
                ? localStorage.setItem(name, value)
                : _writeCookie(name, value, days);
        },

        /**
         * @param {String} name The name of the value to retrieve
         * @return {?String} The value of the 
         */
        get: function(name) {
            return _hasLocalStorageSupport
                ? localStorage.getItem(name) 
                : _readCookie(name);
        },

        /**
         * @param {String} name The name of the value to delete/remove from storage
         */
        remove: function(name) {
            _hasLocalStorageSupport
                ? localStorage.removeItem(name)
                : this.set(name, "", -1);
        }
    };
})();

10

मैं व्यक्तिगत रूप से amplify.js पसंद करता हूँ । यह अतीत में मेरे लिए वास्तव में अच्छी तरह से काम किया है और मैंने इसे सभी स्थानीय भंडारण जरूरतों के लिए अनुशंसित किया है।

IE 5+, फ़ायरफ़ॉक्स 2+, सफारी 4+, क्रोम, ओपेरा 10.5+, आईफोन 2+, एंड्रॉइड 2+ का समर्थन करता है और स्टोरेज-ब्राउज़र को संभालने के लिए एक संगत एपीआई प्रदान करता है


3

store.js अन्य ब्राउज़रों पर userData और IE और localStorage का उपयोग करता है।

  • यह कुछ भी जटिल करने की कोशिश नहीं करता है

  • कोई कुकीज़, कोई फ्लैश, कोई jQuery की जरूरत है।

  • स्वच्छ एपीआई।

  • 5 केबी संकुचित

https://github.com/marcuswestin/store.js



1

लॉनचेयर एक अच्छा विकल्प भी लगता है

एक लॉनचेयर छोटे और बाहर को छोड़कर एक सोफे की तरह होता है। एचटीएमएल 5 मोबाइल ऐप के लिए एकदम सही है, जिन्हें हल्के, अनुकूली, सरल और सुरुचिपूर्ण दृढ़ता समाधान की आवश्यकता होती है।

  • संग्रह। एक लॉनचेयर उदाहरण वास्तव में वस्तुओं की एक सरणी है।
  • अनुकूली दृढ़ता। अंतर्निहित स्टोर एक सुसंगत इंटरफ़ेस के पीछे सारगर्भित है।
  • प्लगेबल संग्रह व्यवहार। कभी-कभी हमें संग्रह सहायकों की आवश्यकता होती है लेकिन हमेशा नहीं।

0

नहीं है realstorage है, जो एक fallback के रूप में Gears का उपयोग करता।


धन्यवाद। दुर्भाग्य से, ऐसा लगता है कि यह PersistJS के @ josh3736 के सुझाव से कम ब्राउज़रों का समर्थन करेगा। मैं अभी भी इसे देखूंगा, और सुझाव की सराहना करूंगा।
तोरें
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.