सेशनस्टोरेज में जावास्क्रिप्ट ऑब्जेक्ट्स सेव करें


152

SessionStorage और LocalStorage एक वेब ब्राउज़र में कुंजी / मूल्य जोड़े को बचाने की अनुमति देता है। मान एक स्ट्रिंग होना चाहिए, और js ऑब्जेक्ट्स को सहेजना तुच्छ नहीं है।

var user = {'name':'John'};
sessionStorage.setItem('user', user);
var obj = sessionStorage.user; // obj='[object Object]' Not an object

आजकल, आप JSON पर ऑब्जेक्ट्स को क्रमांकित करके, और फिर ऑब्जेक्ट्स को पुनर्प्राप्त करने के लिए उन्हें डीरियलाइज़ करके इस सीमा से बच सकते हैं। लेकिन स्टोरेज एपीआई हमेशा setItemऔर getItemतरीकों से गुजरता है ।

sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

क्या मैं इस सीमा से बच सकता हूं?

मैं बस कुछ इस तरह से निष्पादित करना चाहता हूं:

sessionStorage.user.name; // 'John'
sessionStorage.user.name = 'Mary';
sessionStorage.user.name // 'Mary'

मैंने कॉल को रोकने के तरीकों defineGetterऔर defineSetterतरीकों की कोशिश की है, लेकिन यह एक थकाऊ काम है, क्योंकि मुझे सभी गुणों को परिभाषित करना है और मेरा लक्ष्य भविष्य के गुणों को जानना नहीं है।


1
मैंने खुद ऐसा सोचा है। मुझे लगता है कि बहुत सारे लोग हैं। लेकिन मुझे नहीं लगता कि गेट्टर और सेटर विधियां बहुत अधिक बोझ हैं। BTW; आप जावास्क्रिप्ट और MS के साथ अनुक्रमित और पार्स कर सकते हैं और अंत में सभी के समान मानक वस्तुओं का समर्थन कर रहे हैं। JSON और jQuery जैसे संकुल की आवश्यकता के दिन तेजी से समाप्त हो रहे हैं।
रोजर एफ गे

1
मुझे लगता है कि मैं सीमा नहीं देखता। यह JSON.stringify और JSON.parse का उपयोग करने के लिए ओवरकिल की तरह लग सकता है यदि आपके पास कभी केवल तुच्छ वस्तुएं हैं, लेकिन अगर आपके पास अच्छे आकार के डेटा ऑब्जेक्ट हैं, तो वे दो विधियां आपके लिए बहुत काम कर रही हैं।
रोबस्टो

5
"क्या मैं इस सीमा से बच सकता हूँ?" एक सवाल की तरह लगता है
sonicblis

1
अच्छी तरह से सीमा या नहीं, इस सवाल ने मुझे एक समस्या को हल करने में मदद की, इसलिए धन्यवाद।
मैट वेस्ट

जवाबों:


19

या तो आप वेब स्टोरेज एपीआई द्वारा दिए गए एक्सेसरों का उपयोग कर सकते हैं या आप एक आवरण / एडेप्टर लिख सकते हैं। डिफाइन्टरगेटर / डिफाइन्टर के साथ आपके बताए मुद्दे से लगता है कि रैपर / अडैप्टर लिखना आपके लिए बहुत काम की बात है।

मैं ईमानदारी से नहीं जानता कि आपको क्या बताना है। हो सकता है कि आप "हास्यास्पद सीमा" के बारे में अपनी राय का मूल्यांकन कर सकें। वेब स्टोरेज एपीआई सिर्फ एक कुंजी / मूल्य की दुकान है।


8
क्षमा करें यदि मैंने 'हास्यास्पद' के साथ अनुचित शब्द का प्रयोग किया है। इसे 'इतना दिलचस्प हो सकता है' से बदलें। मुझे लगता है कि वेबस्टोरेज नई वेब के सबसे रोमांचक सुधारों में से एक है। लेकिन मुझे लगता है कि मूल्य की-मैप में केवल तार को बचाने के लिए एक सीमा है। यह एक कुकीज़ की अगली कड़ी की तरह लगता है। मुझे पता है कि भंडारण केवल जावास्क्रिप्ट भाषा के लिए एक विनिर्देशन गैर है, लेकिन वस्तुओं को क्रमबद्ध करना एक दिलचस्प सुधार हो सकता है। तुम क्या सोचते हो?
फेरन बसोरा

2
यदि JSON पर्याप्त नहीं है, तो आप हमेशा अपनी खुद की वस्तु क्रमांकन विधियों को लिख सकते हैं।
रयान ओल्‍ड्स

110

क्या आप अपनी वस्तु को 'सख्त' नहीं कर सकते ... फिर अपनी वस्तु के sessionStorage.setItem()उस स्ट्रिंग प्रतिनिधित्व को संग्रहीत करने के लिए उपयोग करें ... तब जब आपको इसकी आवश्यकता हो sessionStorage.getItem()और तब $.parseJSON()इसे वापस लाने के लिए उपयोग करें?

काम करने का उदाहरण http://jsfiddle.net/pKXMa/


यह मेरे लिए काम करता है। मुझे $ .parseJSON ()
ओलाफुर

Web Api प्रमाणीकरण जैसी कुछ प्रणालियाँ ऑब्जेक्ट {propertyOneWithoutQuotes: "<value1>", ... propertyNWithoutQuotes: "<valueN>"} के रूप में ऑब्जेक्ट्स लौटाती हैं, जिन्हें "स्ट्रिफ़ाइज़" से गुजरने की आवश्यकता होती है। यदि कई स्रोत हैं, तो डेटा को मानकीकृत करने के लिए स्ट्रिंग का उपयोग करना बेहतर हो सकता है।
जेलगैब

यह बहुत अच्छा जवाब है। सत्रांक में ऑब्जेक्ट को स्टोर करने और स्टोर करने के लिए JSON.stringify () का उपयोग करना अच्छा है। फिर, यह ऑब्जेक्ट को प्राप्त करने के लिए स्ट्रिंग को डी-सीरियल करने के लिए $ .parseJSON () का उपयोग करता है।
थॉमस.बेंज़

102

समाधान सेशन को कॉल करने से पहले ऑब्जेक्ट को सख्त करना है।

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);

समाधान को लिंक न करने के लिए धन्यवाद
लक्स-ऑलस्टोर्न

12

यह एक गतिशील समाधान है जो वस्तुओं सहित सभी मूल्य प्रकारों के साथ काम करता है:

class Session extends Map {
  set(id, value) {
    if (typeof value === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(id, value);
  }

  get(id) {
    const value = sessionStorage.getItem(id);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }
}

फिर :

const session = new Session();

session.set('name', {first: 'Ahmed', last : 'Toumi'});
session.get('name');

5

उदाहरण:

 sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'});
 sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
 //Query first object
  sesssionStorage.getObj(1)
  //Retrieve date created of 2nd object
  new Date(sesssionStorage.getObj(1).date)

एपीआई

Storage.prototype.setObj = function(key, obj) {

        return this.setItem(key, JSON.stringify(obj))
    };
    
    Storage.prototype.getObj = function(key) {
        return JSON.parse(this.getItem(key))
    };

4
मुझे लगा कि जावास्क्रिप्ट में सबसे अच्छी प्रथाओं में से एक प्रोटोटाइप ऑब्जेक्ट्स नहीं है जो आपके पास नहीं है। Storage.prototype.setObj का उपयोग करना एक बुरे विचार की तरह लगता है।
britztopher

3
बस अनिवार्य जोड़ना .. सुनिश्चित करें कि आप इस प्रोटोटाइप कोड को नहीं जोड़ते हैं - और इस पर विशेष रूप से भरोसा करते हैं - पहली जाँच के बिना कि क्या ब्राउज़र इसका समर्थन करता है भंडारण:if (typeof (Storage) !== "undefined"){ /* browser supports it */ }
JoeBrockhaus

4

सत्र भंडारण एक मनमानी वस्तु का समर्थन नहीं कर सकता है क्योंकि इसमें फ़ंक्शन शाब्दिक (रीड क्लोजर) शामिल हो सकते हैं जो एक पृष्ठ पुनः लोड होने के बाद पुनर्निर्माण नहीं किया जा सकता है।



2

आप स्टोर लाइब्रेरी का उपयोग भी कर सकते हैं जो क्रॉसब्रोसर क्षमता के साथ आपके लिए यह प्रदर्शन करता है।

उदाहरण :

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})

0

आप सत्र संग्रहण से ऑब्जेक्ट को सहेजने और पुनर्प्राप्त करने के लिए 2 आवरण विधि बना सकते हैं।

function saveSession(obj) {
  sessionStorage.setItem("myObj", JSON.stringify(obj));
  return true;
}

function getSession() {
  var obj = {};
  if (typeof sessionStorage.myObj !== "undefined") {
    obj = JSON.parse(sessionStorage.myObj);
  }
  return obj;
}

इसे इस तरह उपयोग करें: - वस्तु प्राप्त करें, कुछ डेटा को संशोधित करें, और वापस सहेजें।

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.