When using AngularJS services to pass data, the data may be lost when the page is refreshed

I'm facing an issue with transferring data from controller A to controller B using a Factory (or a Service) when the user refreshes the browser. I am able to successfully set the data in controller A and retrieve it in controller B, but upon refreshing the page while on the controller B view, the data is lost and returns as "undefined". I believe using $localStorage could help solve this problem, any suggestions? What could be causing this issue?

The service factory I have implemented is quite straightforward, with an object defined as:

var obj = {};

and two methods:

    return{
getObj: function(){return obj;},
setObj: function(data){ obj = data;}
    };

Controller A utilizes the setObj method, while controller B makes use of getObj. Everything functions properly the first time around, but encountering a page refresh while on the controller B view results in loss of data.

javascriptangularjs

Answer №1

Indeed, your information will unfortunately be erased when the page is refreshed, but this is a common occurrence. When you reload the page, the service and controllers linked to your current page are reloaded as well, causing the data to reset. In your situation, the object

var obj = {};

is initialized anew.

To avoid losing your data, you can save it in localStorage or a cookie for persistent storage. My recommendation would be to utilize localStorage due to its larger size capacity and efficiency compared to cookies. With cookies, the data will be sent with each Ajax request, which is not ideal.

Answer №2

When a user performs a page-reload, persistence on browsers is lost. Fortunately, there are several approaches to address this problem, such as utilizing the WebStorage API in HTML5.

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

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

javascriptjqueryruby-on-railsajaxforms

Can someone guide me on the process of opening and closing a Material-UI Dialog within a Meteor/React application?

I'm attempting to create a dialog with a form that pops up when the user clicks a button. I followed the example on the Material-UI Dialog site for creating a button to open the dialog and adding a TextField within it. This is being done using Meteor ...

javascriptreactjsmeteormaterial-designmaterial-ui

Developing a Monitoring-Frontend Application with backbone.js

I am in the process of developing a tool for monitoring and analyzing statistics. The current setup is as follows: Collector-Backend: This component receives queries in JSON format from the frontend, fetches and stores them in a cache, and then notifies ...

javascriptpythonjsonmodel-view-controllerbackbone.js

Facebook and the act of liking go hand in hand, growing together

I am working on a website where I want to include Facebook like and share buttons with counters. To achieve this, I used Facebook's own links to generate these buttons for the specific URL. The issue I encountered is that when I like or share the page ...

javascriptphpjqueryfacebookfacebook-graph-api

Encountered an issue while attempting to load the required module

I'm having trouble setting up Stripe for my app and getting errors when trying to implement the module. Typically, I would require the module at the top of the file in order to use it, but when I do this in the paymentCtrl file, it doesn't work a ...

javascriptangularjsnode.jsexpressstripe-payments

Trigger the errorPlacement function of the jQuery Validation Plugin on events like onfocusout, keyup, and click

Currently, I am utilizing the jquery validation plugin and aiming to utilize the errorPlacement function in order to include error messages to the fields title attribute and display only a ✘ next to the field. Everything works as intended when the form ...

javascriptjqueryformsvalidation

The axios requests are sent to the backend API, but the webpage remains empty without

I am trying to retrieve a base64 encoded image from my local backend by making a local API call. The logging on the backend confirms that axios is successfully calling the API, however, the frontend displays an empty page with no data. What could be caus ...

javascriptvue.jsaxios

What is the best way to customize the border color of a disabled Material UI TextField?

I'm struggling to override the default style for disabled Mui TextField components, particularly in changing the border color. Although I successfully altered the label color for disabled fields, I can't seem to get the border color to change. T ...

javascriptreactjsmaterial-ui

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

I have successfully used the Conveyor belt slideshow script from http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm. Now, I am looking to find another script that works similar to this one. Does anyone have any recommendations for a tool that ...

javascriptjquery

Tips for aligning placeholder and text at the center in a React Material UI TextField

Existing Layout: https://i.stack.imgur.com/Zv4Tg.png Desired Layout: https://i.stack.imgur.com/Xuj6O.png The TextField element is displayed as follows: <TextField multiline={false} autoFocus placeholder={props.defaultAmt} ...

javascriptcssreactjsmaterial-uijsx

What is the process for implementing a third-party component in my web application?

After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...

javascripthtmlcsssemantic-uicustom-component

Using the IE method getelementbyid to target an object within the document

Is there a way to use getElementById to access an object that already exists in the document? I am specifically trying to target the element "test" which is nested within parentDiv1. While this code works in Firefox, it's not functioning properly ...

javascriptinternet-explorer

What is the best way to create a map in React that allows for changing the state without affecting all elements?

When working with a JSON file containing various values, one of them being "iframe" which can hold either "si" (yes) or "no" based on whether it should include an iframe. With this value (yes/no), I need (this.props.tabsiframe === 'yes') to deter ...

javascriptreactjs

Conflicting Angular components: Sorting tables and dragging/dropping table rows

In the current project I'm working on, I've integrated both angular table-sort and angular drag-drop. However, I ran into an issue where dragging a row and attempting to drop it onto another row causes the table sort to forcefully rearrange the r ...

javascriptangularjsdrag-and-droptablesort

When you attempt to "add website to homescreen" on an iPhone, Ajax malfunctions

I have a unique website feature that utilizes ajax to dynamically load content when the user interacts with certain buttons. Everything functions smoothly up until a user tries to access the website through the "add to homescreen" option on mobile Safari a ...

javascriptjqueryiphoneweb-applicationsmobile-safari

Configuring the array interval in an Angular application

I'm facing an issue while attempting to use the setInterval() function to update text for the user every 3 seconds. My attempt at looping with a for loop has not been successful - I only see 'test 03' and nothing else. I'm struggling ...

javascriptangulartypescriptsetinterval

Guide on extracting unique identifiers from an array of objects and sorting them by the earliest date in JavaScript

I've got an array of objects and I'm looking to retrieve the items with unique IDs while also selecting the earliest date. For example: [{id:1, date: Jan 12}, {id:2, date: Feb 8}, {id:3, date: Feb 8}] var array = [{id: 1, date: Jan 12 2021 08:00 ...

javascript

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

javascripthtmlajaxshopping-cartshopify

Managing additional components in request JSON when communicating with DialogFlow, previously known as Api.ai

My current challenge involves enhancing the information sent in a JSON request from my application to DialogFlow. While I am familiar with triggering events to send data calling an intent through the method described in Sending Parameters in a Query Reques ...

javascriptjsondialogflow-es

Utilizing JavaScript as an alternative to PHP in this specific scenario

Hey everyone, I'm looking to pass data from PHP to JavaScript. Below is my PHP code that I need to adapt for use in JavaScript: $result = dbMySql::Exec('SELECT Latitude,Longitude FROM data'); while ($row = mysqli_fetch_assoc($result)) $ ...

phpjavascriptajaximplode