Storing array data locally within an AngularJS application for seamless sharing between two separate applications

Question

Storing array data locally within an AngularJS application for seamless sharing between two separate applications

I need assistance with persisting and sharing array data var queries = []; between two separate AngularJS applications. One application is for the front end, while the other is for the admin side. Both applications cause the entire page to load when accessed.

I attempted to use the code below to share the data, but unfortunately, it's not working as expected:

.factory('QueryService', function() {
        var queries = [];
        var factory = {};
        //..
    factory.addQuery = function(query) {
          queries.push(query);
        localStorage.setItem('queries', JSON.stringify(queries));
        console.log(JSON.parse(localStorage.getItem('queries')));
        return JSON.parse(localStorage.getItem('queries'));
    };
    //..
    return factory;
}

The above code only retrieves the last element added to the queries array.

I also tried using angular-local-storage, but encountered the same issue.

.factory('QueryService', ['localStorageService', function(localStorageService) {
        var queries = [];
        var factory = {};
        //..
    factory.addQuery = function(query) {
          queries.push(query);
        localStorageService.set('queries', queries);
        console.log(localStorageService.get(('queries')));
        return localStorageService.get(('queries'));
    };
    //..
    return factory;
}

I require the array queries data to be accessible in both the front end and admin applications.

Can anyone provide guidance on how to achieve this?

javascript arrays angularjs local-storage angular-local-storage

Answer 1

Answer №1

Utilize the factory function to establish private variables specifically for that factory, allowing you to both set and retrieve the value of those private variables.

If needed, you could also create an additional method to clear the queries variable.


    .factory('QueryService', function () {
        var queries = [];
        var factory = {};

        return {
            addQuery : function (query) {
                queries.push(query);
                localStorage.setItem('queries', JSON.stringify(queries));
                console.log(JSON.parse(localStorage.getItem('queries')));
                return JSON.parse(localStorage.getItem('queries'));
            },
            fetchQuery : function ( ) {
                return localStorage.getItem('queries');
            }
        };
    });

Answer 2

Utilize the factory function to establish private variables specifically for that factory, allowing you to both set and retrieve the value of those private variables.

If needed, you could also create an additional method to clear the queries variable.


    .factory('QueryService', function () {
        var queries = [];
        var factory = {};

        return {
            addQuery : function (query) {
                queries.push(query);
                localStorage.setItem('queries', JSON.stringify(queries));
                console.log(JSON.parse(localStorage.getItem('queries')));
                return JSON.parse(localStorage.getItem('queries'));
            },
            fetchQuery : function ( ) {
                return localStorage.getItem('queries');
            }
        };
    });

Answer 3

Answer №2

Give this a shot:

// store data in localStorage
localStorage.myData = angular.toJson(data);


// get data from localStorage
var data = angular.fromJson(localStorage.myData);

Please inform me of the outcome.

Answer 4

Give this a shot:

// store data in localStorage
localStorage.myData = angular.toJson(data);


// get data from localStorage
var data = angular.fromJson(localStorage.myData);

Please inform me of the outcome.

Storing array data locally within an AngularJS application for seamless sharing between two separate applications

Answer №1

Answer №2

Similar questions

Is it possible to configure Nginx mime types within a Docker container?

Switch up the blogs displayed depending on the category chosen using React

Steps for deactivating AMD on four files and sequentially loading them using webpack

Strategies for aligning tooltips with the locations of dragged elements

Save an array of messages by making separate API calls for each one

Explore the Benefits of Using MUI V5 Grid Component for Your Box Design

Performing bulk operations on multiple documents in MongoDB by specifying a custom identifier for updating or

Issue with Highcharts failing to render points on regular intervals

`Some Items Missing from Responsive Navigation Menu`

What is the best way to store client-uploaded files on the client-side using Bootstrap forms and Express server code?

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

Utilizing Restangular to refine search results with filters

Establish the predefined date for the air-datepicker

Trouble with Webpack compiling SCSS files

Learn how to dynamically deactivate a radio button in AngularJS by utilizing the ng-repeat directive

The differences between using the opacity attribute in HTML and the opacity property

The display function in Javascript has a tendency to work sporadically

Node.js Error: The object does not have the specified method

Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

Is there a way to illuminate a complete row by simply hovering over a span within one of the columns?