Preserve information on page reload in AngularJS

I am currently working on an AngularJS application with Spring REST as the backend. My experience with AngularJS is quite new.

Within my UI page, I have a table displaying a list of objects with an edit button for each record. Clicking the edit button opens another page that displays and updates the data accordingly.

The issue arises when I refresh the browser while on the edit page, causing me to lose my data. One solution could be to make another REST call, but I would prefer to avoid this option if possible.

Is there a way to retain the data on the page after refreshing, or do you think making a REST call is the better solution?

Answer №1

In order to maintain data consistency with possible changes on the server, it is recommended to utilize a REST call for fetching updated information. However, if you prefer to avoid unnecessary calls, another approach could be storing the data locally using localstorage. Simply save the necessary data in local storage as key-value pairs, assigning unique keys to each row. For this purpose, consider utilizing a helpful plugin like Angular LocalStorage

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

What are the steps for utilizing ckeditor to send textarea information via ajax?

Here is the code snippet that controls the textarea in my chat application: <div class="chat"> <div class="messages"></div> <textarea class="entry" name="entry" placeholder="Welcome to the Chat. Enter your message here!">&l ...

Unable to retrieve cookie using getServerSideProps in Next JS

My goal is to retrieve and return two cookies, but I am running into an issue where only the token cookie is returned successfully, while the key cookie remains inaccessible. export async function getServerSideProps(ctx) { const cookies = ctx.req.header ...

Strictly allowing numerical values to be entered into an input field using Angular, without relying on HTML5 features

Is there a way in Angular to restrict a field so that it only accepts numbers? I am familiar with using input type="number" for this purpose traditionally, but curious about how it can be done best in Angular. ...

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

Display the block if the HTTP response in AngularJS is successful

There are 3 blocks displayed depending on a boolean value. <button ng-if="user.friendship == null" ng-click="requestFriendship(user.user.id)" class="button button-outline button-calm"> Invite as friend </button> <button ng-if="user.frie ...

Exploring ways to create simulated content overflow using react-testing-library

I have integrated material-table with material ui to develop a spreadsheet application. One of the features I have added is setting a maximum width of 50px for cells. If the content in a cell exceeds this width, it will display an ellipsis at the end of ...

Menu button is expanded without the need to click

The Bootstrap 5 button extends the default behavior and does not collapse. Here is the code: <nav id="header-nav" class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class= ...

Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...

Cleaning up unwanted objects in THREE.js webGL

Our app utilizes THREE.js to showcase 3D body meshes. We have a special object named MeshViewer that manages the rendering process; within the initialize method, we establish this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBu ...

I am not receiving the filtered data from the pagination directive

Hello everyone! I am currently utilizing the pagination directive from the following link: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination However, I am encountering a challenge with retrieving filtered data. Typicall ...

Performing multiple requests using Axios library in a React application

My goal is to make 2 requests and define variables using this.setState({}) for future modifications. This is the code snippet I have: class App extends React.Component { constructor() { super(); this.state = {user: false, repository :false} ...

Conceal a designated column within a material angular data table based on the condition of a variable

In the morning, I have a question about working with data tables and API consumption. I need to hide a specific column in the table based on a variable value obtained during authentication. Can you suggest a method to achieve this? Here is a snippet of my ...

Using AngularJS location.path for unique custom URLs

Control Code: $scope.$on('$locationChangeStart', function () { var path = $location.path(); var adminPath = '/admin/' ; if(path.match(adminPath)) { $scope.adminContainer= function() { return true; }; }); HTML <div clas ...

The disabled feature doesn't seem to be functioning properly with the <i> tag when using Font Awesome icons

I've designed a plunk where I'm trying to validate a form with a button featuring a font-awesome icon. The text field is mandatory and I'd like to disable the icon if no data has been entered. However, it seems that ng-disabled doesn't ...

The result of Coordinates.speed is consistently null

I'm working on a project that involves changing the speed of background particles based on the user's device speed (like when they are in a car or bus). I thought the Geolocation API would be a perfect fit, specifically the Coordinates.speed prop ...

Navigating Redirect Uri in Ionic for third-party API integration

After creating a webapp, I decided to venture into developing a mobile app using Ionic. The idea of making a progressive web app crossed my mind, but unfortunately Apple doesn't support it yet. (By the way, I'm still quite new to all of this) F ...

Effortless script to make a URL request and display the response status | using JavaScript with jQuery

Is there a way to use JavaScript or jQuery to request a URL or website address and display the response code? For example: request www.google.com if (response_code = 200) { print "website alive" } else if (response_code = 204) { print "not found"; } ...

"Why is the comparison function of bcryptjs returning null even though the hash being used is the one that was generated

For security purposes, I securely store hashed passwords in MongoDB. However, when I attempt to compare the stored password with a user-entered string, bcryptjs returns a null value. https://i.stack.imgur.com/4sTXM.png The hashed password is stored in bin ...

css problem with scaling in firefox

My goal is to create a website that adjusts its size based on the document size. When the document size is between 0px and 1024px, I want the design to be responsive. This can easily be achieved with CSS media queries. Similarly, when the document size is ...

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...