Exploring a new approach to organizing data with LocalStorage and AngularJS

Question

Exploring a new approach to organizing data with LocalStorage and AngularJS

I developed an application that utilizes LocalStorage to store data.

The issue I encountered was storing a large number of objects under a single key, causing the DOM to become blocked. This is due to the necessity of parsing and stringifying the JSON data every time there is a read or write operation on the "database."

As stated in a response on a different question:

LocalStorage and JSON stringify/parse operations happen synchronously on the main thread, which can slow down the app and lead to a delay in DOM rendering.

The data insertion function in the code snippet looks like this:

$scope.recordlist = extractRecordJSONFromLocalStorage();
$scope.addRecord = function () {
    $scope.recordlist.push(
            {
                date: $scope.dateJson, 
                time: $scope.time, 
                car: $scope.carList.code, 
                driver: $scope.driverList.name,
                from: $scope.locationList.place,
                destination: $scope.locationList2.place, 
                pax: $scope.paxList,
                comments: [],
                arrival: '',
                inserted: '',
                cancelled:'',
                duration:''
            }
        );
    jsonToRecordLocalStorage($scope.recordlist);
};

Given these limitations, I need to rethink my approach to storing and retrieving data.

The current method made sense to me, as I relied on AngularJS to work with and compare the objects stored under a single key.

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search )" 
     ng-hide="is.cancelled && (!record.cancelled || record.cancelled === '') || has.comment && (!record.comment || record.comment === '')" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}" 
     ng-hide="!record.arrival && !record.cancelled" 
     ng-show="record.cancelled">

Any suggestions on how I can migrate to a more efficient system while retaining the AngularJS functionality?

I aim to avoid reading the entire file each time and still be able to filter records effectively. Any guidance on this matter, such as recommended documentation or theories, would be greatly appreciated.

You can view a live demo of the application here.

I acknowledge that there are key concepts related to data storage and retrieval that I may be overlooking. Any resources or advice on this topic would be invaluable.

javascript json angularjs local-storage

Answer 1

Answer №1

One potential enhancement would be to create a custom filter to replace the ng-show and ng-hide directives for displaying the data.

angular.module('myapp', []).filter('showhide', function() {

    return function(record, isCancelled) {

        var hide1 = isCancelled && (!record.cancelled || record.cancelled === '') || has.comment && (!record.comment || record.comment === '');

        var hide2 = !record.arrival && !record.cancelled;

        return !hide1 && !hide2;
    };
});

Then, you can call the filter like this:

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search | showhide:is.cancelled )" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}">

This approach relies on loading all the data into a JavaScript variable and filtering it using your script. It is assumed that your data set is not large, ideally not exceeding 10,000 objects in the list to avoid performance issues related to rendering every ng-hide element before removal.

To manage the data, you should store the filtered list in a variable that is only read once and update the local storage object with any changes. This can be achieved by using a service to handle the data.

angular.module('myapp', []).service('dataService', function() {

    var data = ... // Retrieve from localStorage
    return {
        get: data,
        save: function(){
            // Save the 'data' variable to localStorage
        }
    }
}

In your controller, retrieve the data from the service like this:

angular.module('myapp').controller('myCtrl', function($scope, dataService){
    $scope.recordList = dataService.get();
});

By using this approach, you can manipulate the array without needing to read it again, and updates to the array can be saved using the save() method on the dataService object.

Alternatively, you could consider using pouchdb or dexie.js to handle the filtering and querying of the database directly. pouchdb is suitable for syncing data with a couchdb instance, while dexie.js may be simpler for storing data locally on the client side.

However, it is unlikely that you will outgrow the localStorage solution quickly.

Answer 2

One potential enhancement would be to create a custom filter to replace the ng-show and ng-hide directives for displaying the data.

angular.module('myapp', []).filter('showhide', function() {

    return function(record, isCancelled) {

        var hide1 = isCancelled && (!record.cancelled || record.cancelled === '') || has.comment && (!record.comment || record.comment === '');

        var hide2 = !record.arrival && !record.cancelled;

        return !hide1 && !hide2;
    };
});

Then, you can call the filter like this:

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search | showhide:is.cancelled )" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}">

This approach relies on loading all the data into a JavaScript variable and filtering it using your script. It is assumed that your data set is not large, ideally not exceeding 10,000 objects in the list to avoid performance issues related to rendering every ng-hide element before removal.

To manage the data, you should store the filtered list in a variable that is only read once and update the local storage object with any changes. This can be achieved by using a service to handle the data.

angular.module('myapp', []).service('dataService', function() {

    var data = ... // Retrieve from localStorage
    return {
        get: data,
        save: function(){
            // Save the 'data' variable to localStorage
        }
    }
}

In your controller, retrieve the data from the service like this:

angular.module('myapp').controller('myCtrl', function($scope, dataService){
    $scope.recordList = dataService.get();
});

By using this approach, you can manipulate the array without needing to read it again, and updates to the array can be saved using the save() method on the dataService object.

Alternatively, you could consider using pouchdb or dexie.js to handle the filtering and querying of the database directly. pouchdb is suitable for syncing data with a couchdb instance, while dexie.js may be simpler for storing data locally on the client side.

However, it is unlikely that you will outgrow the localStorage solution quickly.

Exploring a new approach to organizing data with LocalStorage and AngularJS

Answer №1

Similar questions

Whenever a service is utilized, the form on my controller seems to be out of scope for the service in question

Transformation of JSON data into a structured dataframe

Executing a Python script asynchronously from a Node.js environment

In search of assistance with a persistent react.js error plaguing my work

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Clicking a button in jQuery to load the Pagemethods

The absence of the 'Access-Control-Allow-Origin' header is reported even though it is actually present

Tips on restricting dates to be equal to or earlier:

AngularJS - Troubleshooting: Why Directive is Unable to Access Ancestor's Required Controller

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

Issue with Bootstrap 5 Dropdown not toggling back

Leverage the power of npm to utilize various javascript libraries for

The Shopify Pixel Extension has encountered an issue - error code 1

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

The useRoutes function is returning null despite the correct pathname being provided

Is there a way to cache JSON in Twig?

Error encountered when making a post request with Angular JS and Node JS: Bad

Struggling to connect CSS and JavaScript files to index.html on Heroku while utilizing Node.js