2017-01-02 22 views
9

के साथ स्थानीय स्टोरेज का उपयोग कैसे करें मैं Vue.JS के साथ मार्कडाउन संपादक पर काम कर रहा हूं, और मैंने डेटा बचाने के लिए इसके साथ स्थानीय स्टोरेज का उपयोग करने की कोशिश की लेकिन मुझे नहीं पता कि डेटा में नया मान कैसे सहेजना है जब भी उपयोगकर्ता टाइप करता है Vue.JS में चर!Vue.JS - Vue.JS

+1

कृपया अपना समाधान एक उत्तर के रूप में जोड़ें, इसलिए अन्य इसे ऊपर उठा सकते हैं, और आप उत्तर को अपने समाधान के रूप में स्वीकार कर सकते हैं। – nathanvda

+1

@nathanvda किया :) –

+0

अच्छा! अब आप कुछ अंक अर्जित करना शुरू कर सकते हैं :) – nathanvda

उत्तर

11

नोट इस मेरी खोज में एक संपादन था आयन, लेकिन मैं इसे अलग से जवाब देता हूं क्योंकि @nathanvda ने सुझाव दिया था।


मुझे वह समाधान मिला जो मैं ढूंढ रहा था। पहला प्रयोग घड़ी विधि आप इस तरह पर डेटा भंडारण कर रहे हैं चर पर परिवर्तन का पता लगाने के लिए:

watch: { 
    input: function() { 
    if (isLocalStorage() /* function to detect if localstorage is supported*/) { 
     localStorage.setItem('storedData', this.input) 
    } 
    } 
} 

यह जब भी उपयोगकर्ता नई आदानों जोड़ने वेरिएबल का मान अद्यतन करेगा।

तो इस तरह चर के लिए नए मूल्य निर्दिष्ट:

app.input = localStorage.getItem('storedData'); 

और है कि यह :)

+0

इसके अलावा आप यह भी आसान घटनाओं के साथ ऐसा कर सकते हैं जैसे https://jsfiddle.net/a8gkkpjs/1/ –

+0

मैंने ऐसा किया, लेकिन इस तरह रीफ्रेशिंग के बाद अंतिम दर्ज मूल्य को सहेजता नहीं है पन्ना। –

+1

आप भी वू प्लगइन का उपयोग कर सकते हैं। जैसे https://github.com/pinguinjkeke/vue-local-storage – user2875289

5

तुम बस localStorage

localStorage.setItem('YourItem', response.data) 

में बचाने के लिए आप का उपयोग कर इस प्राप्त कर सके निम्न कर सकते हैं:

localStorage.getItem('YourItem') 

localStorage से हटाने के लिए:

localStorage.removeItem('YourItem') 
0

आप वी मॉडल का उपयोग कर सकते है कि आप हर परिवर्तन के साथ चर बाध्य करने के लिए है या आप इसे अभिकलन रख सकते हैं: {} section.computed vue.js के जीवन हुक की तरह है, जब यह मान बदल जाता है तो यह घटक फिर से प्रस्तुत करता है।