मैं Angularjs का उपयोग करके स्थानीय संग्रहण में डेटा कैसे संग्रहीत करूं?

177

वर्तमान में मैं एक एक्शन करने के लिए एक सेवा का उपयोग कर रहा हूं, अर्थात् सर्वर से डेटा पुनर्प्राप्त करता हूं और फिर सर्वर पर डेटा को स्टोर करता हूं।

इसके बजाय, मैं डेटा को सर्वर पर संग्रहीत करने के बजाय स्थानीय भंडारण में डालना चाहता हूं। मैं यह कैसे करु?

angularjs

— ट्रैकिंग
स्रोत

125

यह मेरे कोड का एक सा है जो स्थानीय भंडारण के लिए संग्रहीत और पुनर्प्राप्त करता है। मैं मॉडल में मूल्यों को बचाने और पुनर्स्थापित करने के लिए प्रसारण घटनाओं का उपयोग करता हूं।

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            name: '',
            email: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

— एंटोन
स्रोत

9

आप इसका उपयोग कैसे करते हैं?

— चॉवी

4

chovy, यहाँ पूर्ण कोणीय उदाहरण stackoverflow.com/questions/12940974/…

— एंटोन

290

रिकॉर्ड के लिए sessionStorage≠localStorage

— मंगल ग्रह रॉबर्टसन

4

आप $ window.sessionStorage का उपयोग कर सकते हैं ताकि आप इसे अपने परीक्षणों में इंजेक्ट कर सकें

— Guillaume Massé

2

@Anton mozilla के पास ठोस दस्तावेज हैं: developer.mozilla.org/en-US/docs/Web/HTML डेवलपर. mozilla.org/en-US/docs/Web/CSS/CSS3 developer.mozilla.org/en-US/docs / वेब / जावास्क्रिप्ट

— ग्वेलियुम मास्स

105

यदि आप $window.localStorage.setItem(key,value)स्टोर करने, $window.localStorage.getItem(key)पुनः प्राप्त करने और $window.localStorage.removeItem(key)निकालने के लिए उपयोग करते हैं, तो आप किसी भी पृष्ठ में मानों को एक्सेस कर सकते हैं।

आपको $windowसेवा को नियंत्रक को पास करना होगा । हालांकि जावास्क्रिप्ट में, windowवस्तु विश्व स्तर पर उपलब्ध है।

$window.localStorage.xxXX()उपयोगकर्ता के उपयोग से localStorageमूल्य पर नियंत्रण होता है । डेटा का आकार ब्राउज़र पर निर्भर करता है। यदि आप केवल तभी उपयोग करते हैं $localStorageतो मान तब तक रहता है जब तक आप अन्य पेज पर नेविगेट करने के लिए window.location.href का उपयोग करते हैं और यदि आप <a href="location"></a>दूसरे पृष्ठ पर नेविगेट करने के लिए उपयोग करते हैं तो $localStorageअगले पृष्ठ में आपका मान खो जाता है।

— सुनील गौड़ा
स्रोत

12

यह समाधान मुझे सबसे अच्छा लगा। प्लग-इन या मॉड्यूल का उपयोग क्यों करें जब आप बस डोम पर आसानी से जा सकते हैं? क्योंकि मैं साधारण तारों के बजाय वस्तुओं को संग्रहीत करना चाहता था, इसलिए मैंने बस itIt () और angular.fromJson () getItem () के साथ संयोजन में angular.toJson () का उपयोग किया। आसान। इसे प्यार करना।

— ब्रेट डोनाल्ड

5

यह सबसे अच्छा जवाब है। किसी बाहरी निर्भरता की आवश्यकता नहीं है।

— कैस्पर ज़ीमियानेक

2

सहमत, यह कुंजी / मूल्य जोड़ी प्रबंधन के लिए सबसे सरल समाधान है

— jolySoft

लाइन में कुंजी क्या है: $ window.localStorage.setItem (कुंजी, मूल्य)। यह कहां घोषित और निर्धारित है?

कुंजी जो कुछ भी आप चाहते हैं कि यह विशिष्ट आईडी का मान हो। इसलिए जब आप किसी चीज़ को स्टोर करते हैं तो आप उस कुंजी को परिभाषित करते हैं और आप इसे पुनः प्राप्त करने के लिए उपयोग करते हैं।

— user441521

56

स्थानीय भंडारण के लिए url के नीचे देखने के लिए एक मॉड्यूल है:

https://github.com/grevory/angular-local-storage

और HTML5 स्थानीय भंडारण और कोणीयज के लिए अन्य लिंक

http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/

— JQuery के गुरु
स्रोत

5

लिंक-केवल उत्तर StackOverflow पर हतोत्साहित होते हैं क्योंकि बाहरी लिंक मर जाते हैं।

— हुबर्ट ग्रौजसकोविआक

50

ngStorageअपने सभी AngularJS स्थानीय भंडारण आवश्यकताओं के लिए उपयोग करें । कृपया ध्यान दें कि यह कोणीय जेएस ढांचे का मूल हिस्सा नहीं है।

ngStorage दो सेवाएं शामिल हैं, $localStorageऔर$sessionStorage

angular.module('app', [
   'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

डेमो की जाँच करें

— Jethik
स्रोत

24

उल्लेख के लायक है कि कोणीय का हिस्सा नहीं है, और अतिरिक्त फ़ाइल के रूप में आयात किया जाना चाहिए

— सर्ज

1

npm मॉड्यूल के लिए लिंक?

— 23

4

एक और वैकल्पिक मॉड्यूल है जिसकी तुलना में अधिक गतिविधि है ngStorage

कोणीय स्थानीय भंडारण:

https://github.com/grevory/angular-local-storage

— द बंड्र
स्रोत

2

आप localStorageउद्देश्य के लिए उपयोग कर सकते हैं ।

कदम:

अपनी फ़ाइल में ngStorage.min.js जोड़ें
अपने मॉड्यूल में ngStorage निर्भरता जोड़ें
अपने कंट्रोलर में $ लोकलस्टोरेज मॉड्यूल जोड़ें
$ localStorage.key = मान का उपयोग करें

— सुखमिंदर परमार
स्रोत

2

मैं (अभी तक एक और) कोणीय html5 भंडारण सेवा लेखक। मैं स्वचालित अपडेट को संभव बनाकर रखना चाहता था ngStorage, लेकिन पाचन चक्र को अधिक पूर्वानुमान / सहज (कम से कम मेरे लिए) बनाते हैं, जब राज्य पुनः लोड करने की आवश्यकता होती है, तब हैंडल करने के लिए घटनाओं को जोड़ते हैं, और टैब के बीच साझा सत्र भंडारण भी जोड़ते हैं। मैंने $resourceइसके बाद एपीआई को मॉडल किया और बुलाया angular-stored-object। इसका उपयोग इस प्रकार किया जा सकता है:

  angular
    .module('auth', ['yaacovCR.storedObject']);

  angular
    .module('auth')
    .factory('session', session);

  function session(ycr$StoredObject) {
    return new ycr$StoredObject('session');
  }

एपीआई यहाँ है ।

रेपो यहां है ।

आशा है कि यह किसी की मदद करता है!

— Yaacov
स्रोत

क्या मतदाता अपने मत की व्याख्या करने की परवाह करेंगे, कृपया?

— डेरेमिक

1

अब मैं अपनी परियोजना में कोणीय-संग्रहित वस्तु का उपयोग करता हूं, और इसका उपयोग करना वास्तव में आसान है। अधिक सवाल का जवाब देने में हां याकोव वास्तव में तेज है। तो मैं भी यह सलाह देते हैं!

— जेआर यूटिली

2

कोणीय में डेटा स्टोर करने के लिए चरणों का पालन करें - स्थानीय भंडारण:

अपने फ़ोल्डर में 'ngStorage.js' जोड़ें।
अपने angular.module में 'ngStorage' इंजेक्षन करें
```
    eg: angular.module("app", [ 'ngStorage']);
```
$localStorageअपने app.controller फ़ंक्शन में जोड़ें

4. आप $localStorageअपने नियंत्रक के अंदर उपयोग कर सकते हैं

Eg: $localstorage.login= true;

ऊपर आपके ब्राउज़र एप्लिकेशन में स्थानीय स्टोर संग्रहीत करेगा

— सैम रूबेन
स्रोत

1

अपनी आवश्यकताओं के आधार पर, जैसे यदि आप डेटा को अंततः कितने स्टोर करने के रिकॉर्ड की सीमा समाप्त करने या सेट करने की अनुमति देना चाहते हैं, तो आप https://github.com/jmdobry/angular-cache पर भी देख सकते हैं जो आपको परिभाषित करने की अनुमति देता है कैश मेमोरी, लोकलस्टोरेज या सेशनस्टोरेज में बैठता है।

— हारून मॉरिसन
स्रोत

1

इसके लिए एक थर्ड पार्टी स्क्रिप्ट का उपयोग करना चाहिए जिसे ngStorage कहा जाता है यहां एक उदाहरण है कि कैसे उपयोग किया जाए। यह स्थानीय क्षेत्र को दायरे या दृश्य में परिवर्तन के साथ अपडेट करता है।

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- CDN Link -->
    <!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
    <script src="angular.min.js"></script>
    <script src="ngStorage.min.js"></script>
    <script>
        var app = angular.module('app', ['ngStorage']);
        app.factory("myfactory", function() {
            return {
                data: ["ram", "shyam"]
            };
        })
        app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {

            $scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
            // Delete from Local Storage
            //delete $scope.abcd.counter;
            // delete $localStorage.counter;
            // $localStorage.$reset(); // clear the localstorage
            /* $localStorage.$reset({
                 counter: 42   // reset with default value
             });*/
            // $scope.abcd.mydata=myfactory.data;
        });
    </script>
</head>

<body ng-app="app" ng-controller="Ctrl">

    <button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>

</html>

— अनिकेत झा
स्रोत