Lagging application utilizing LocalStorage alongside AngularJS

I have developed an application that organizes, compares, filters, and generates statistics from a dataset. The app is designed to function offline since some users may not always have internet access.

However, I am encountering a problem where the app becomes extremely slow after adding around 60 records. For example, when I try to list the objects stored in LocalStorage into a ng-model (Select list), the process of opening the Select box significantly delays.

I am unsure what could be causing this issue. It might be due to a specific function consuming excessive resources or perhaps LocalStorage is not optimized for such extensive use?

I am contemplating transitioning to PouchDB, do you think migrating everything to Pouch instead of LocalStorage would be a wise decision?

I am unable to share the entire controller code here as it is quite lengthy, but I have provided an online version for testing purposes. You can access it here.

To avoid having to create 60 records to observe the slow behavior, you can simply download this CSV file and import it into the app.

The password required for Edit Mode is: admin

I am hopeful that someone may have insights or tips on resolving this challenge!

javascriptangularjslocal-storagepouchdb

Answer №1

It appears that all your records are being stored in a single LocalStorage value (under the key recordspax). This approach can lead to slow performance as each data operation requires JSON parsing/stringifying and storing/retrieving the entire list from the database.

Essentially, you're moving the complete database back and forth between memory and disk for every task. Since both LocalStorage and JSON operations occur synchronously on the main thread, they may delay DOM rendering and ultimately impact the speed of your application.

In this scenario, integrating PouchDB could be useful. Alternatively, consider using a simpler solution like LocalForage, or reconsidering your database structure so that each record has its own key/value pair instead of consolidating everything into one key with a singular value.

(Both LocalForage and PouchDB utilize IndexedDB/WebSQL rather than LocalStorage, ensuring asynchronous database actions that do not hinder DOM functionality. Nevertheless, it's still advisable not to overload a single document with all data to avoid constantly reading/writing the entire database content.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exporting tables and c3 charts from AngularJS to a spreadsheet

I am working on a web application and facing a challenge with exporting both an HTML table and c3 charts into an Excel sheet. While I managed to export the table using FileSaver.js, I'm stuck on how to include the charts in the same file. Any suggesti ...

angularjshtml-tableexport-to-excelc3.js

When Vue detects a change in declared parameters from an empty string, it automatically sends a

Within my application, I am making a request to the backend app and receiving a response with an ID such as { 'id': '12345'}. This ID is then saved as loadId within the data object: export default { name: 'SyncProducts', d ...

javascriptvue.jsaxios

Error! Unable to Inject ComponentFactoryResolver

Recently, I attempted to utilize ComponentFactoryResolver in order to generate dynamic Angular components. Below is the code snippet where I am injecting ComponentFactoryResolver. import { Component, ComponentFactoryResolver, OnInit, ViewChild } from "@an ...

javascriptangulartypescript

Is there a way to deactivate the save button on a form field that shares the same label but has a different ng-model in AngularJS

I am new to coding and I have a form with multiple fields labeled as AGE, each with different ng-model and name attributes. My goal is to keep the save button disabled until all the Age fields are filled out. <table> <tbody> <tr> < ...

angularjsbuttonangularjs-directive

Converting AngularJS scope objects into plain JavaScript arrays: a comprehensive guide

What is the best way to convert an AngularJS scope object into a simple JS array? I have a function that checks if any checkbox is checked and adds the corresponding value to an object. Now, I am trying to transfer the object values to an array and alert ...

javascripthtmlangularjs

AJAX nesting with varying input speeds

So, this is the situation - during a job interview I was presented with an interesting AJAX question: The scenario involves code where the onChange function triggers an AJAX call to the 'asdf server', and then that call initiates another AJAX ca ...

javascriptjqueryajax

What could be causing the lag in the animation on my mobile device?

I created a CSS animation that runs smoothly on my computer, but I noticed some jerkiness when testing it on my smartphone. Can someone explain why this is happening and suggest ways to fix it? I would like the animation to work on mobile devices as well ...

javascriptjqueryhtmlcssbootstrap-4

Using jQuery to run code when a key is pressed and returning it to its original state upon release

In order to combine regular keys with modifier keys if they are being pressed simultaneously, the concept is to use key codes like c along with Ctrl c The following solution has been tested and proven effective: let increment = 10; $(document).keydown(f ...

javascriptjqueryfunctioneventstriggers

Unable to locate a declaration file for the module "../constants/links" in src/constants/links.js, as it implicitly defaults to type 'any'

Within my VueJS application, I have brought in some constant variables. <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator' import { MOON_HOLDINGS_LINK, TWITTER_LINK } from '../constants/links' @Comp ...

javascriptvue.jsvuejs2

Execute the script repeatedly

(Since Stack snippet is temporarily down, I included a jsfiddle link): Visit this link for the code I've been struggling to get this script to work. Here's the simple Javascript code I have: $(document).ready(function() { showMessage(); s ...

javascriptjqueryhtmlcss

After the utilization of both HTMLPurifier and CKEditor, the quotations are altered

My script utilizes CKEditor and HtmlPurifier to process content. However, I have noticed that it is changing <p dir="rtl"> to <p dir="&quot;rtl&quot;"> after saving. How can I prevent this from happening? I am unsure whether this issue ...

javascriptphphtmlckeditorhtmlpurifier

Time taken to execute all the tests using the karma runner

We have recently transitioned to running unit tests remotely using browserstack across multiple browsers and operating systems with the help of the karma-browserstack-launcher plugin. The current output of our test run appears as follows: $ grunt unit:re ...

javascriptangularjsunit-testingkarma-runnerbrowserstack

After a period of 10 minutes with no activity, proceed to the next page

I am in the process of developing a custom local website that will be displayed on a large touch screen at my current workplace. Only one user can interact with it at a time. My client has requested a screensaver feature to appear after 10 minutes of no i ...

javascripttimer

To access ES Module, importing is necessary

I'm currently working on a project to develop a service that can convert SVG files into PNG format using the svg2img package. Everything is running smoothly when testing locally with vercel dev, but I keep encountering an error whenever I try to deplo ...

javascriptnode.jsnpmvercel

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

javascriptjqueryhtmlcss

The ajax call resulted in a failed large file upload

Currently, I am focusing on implementing file upload functionality. I have developed a code snippet using an ajax call that works flawlessly when uploading files (GB) from my local server. $.ajax({ type: "POST", url: "process/uploadFlatFile.htm", ...

javascriptajax

The properties of cloned objects in ThreeJS are unable to be defined

While working in ThreeJS using TypeScript, I encountered an issue when attempting to clone a custom object that extends Object3D. The problem arises when the field, which is required for creating a new object, becomes undefined during the cloning process. ...

javascripttypescriptthree.jscopyclone

Is there a way to rotate label text on a radar chart using chart js?

I am working with a Chart js radar diagram that contains 24 labels. My goal is to rotate each label text by 15 degrees clockwise from the previous one: starting with 'Label 1' at the top in a vertical position, then rotating 'Label 2' ...

javascriptreactjscharts

Place an item in front of a specific object within an array

Hey there, I am currently working on an Angular application where I encounter a scenario where I retrieve an object by clicking on it, and this object is part of an array. For example: New Object: {object3} Array of Objects: [{object1}, {object2}, ....] ...

angularjsobject

Establishing the primary language on a multi-language website

I am currently in the process of developing a website and I intend to offer support for both English and French languages. Up to this point, I've been following the primary solution outlined in this question: How to localize a simple HTML website pag ...

javascripthtml