Saving data between refreshes in AngularJS can be achieved by utilizing services or local

In my application, I have a single object stored in $rootScope. I need to find a way to save its state when the user refreshes the app either by pressing F5 or manually. While I've come across examples using $cookies in Angular, they only allow for saving primitive types. The best I could do is save the object as JSON and then restore it from that data later on.

Can anyone provide an example or suggest a library that makes implementing this feature easier, without needing too much additional code?

javascriptangularjsrefresh

Answer №1

Consider utilizing the putObject and getObject methods from $cookies. For more details, visit: $cookies

Alternatively, you can make use of local storage along with JSON functions to parse objects as shown below:

localStorage.setItem('myObject',JSON.stringify({id:'1',name:'test'}))
JSON.parse(localStorage.getItem('myObject'))

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

Interested in using jQuery to trigger the f12 key press?

In my current project, I have successfully disabled the f12 and right click using jQuery. Here is the code snippet: $(document).keydown(function(event){ if(event.keyCode==123){ return false; } else if(event.ctrlKey && event.shiftKey && ...

javascriptjquery

Having trouble importing font-face in scss

Currently, I am working on incorporating a Google font into my project. This is the desired outcome: https://i.sstatic.net/jIO7q.png However, the actual result is different: https://i.sstatic.net/V2KhW.png The code snippet in App.vue looks like this ...

javascriptcssvue.jssassfonts

React JS's popup feature can be unreliable, as it tends to break the application frequently

I have been developing a web application that interacts with a public API and presents the retrieved data in a table format. However, I am encountering an issue where clicking the "Click to Display Hottest Planet" button sometimes results in an error. How ...

javascriptreactjsreact-hooks

Easily iterate through the <li> elements using jQuery and append them to the <datalist> dynamically

My jQuery loop seems to be malfunctioning as it's not showing the values of my li elements. Instead, I'm seeing [object HTMLElement] in my input search bar. <div id="sidebar-wrapper"> <input type="text" list="searchList" class="searc ...

javascriptjquery

Encountering problem with image file encoding while using res.download in Express.js

My node.js server with expressjs is set up for local development, where I store and retrieve various files through basic HTTP calls. Most of the time, everything works smoothly. However, on rare occasions, a small number of files return to the end-user sig ...

javascriptnode.jsimageexpressencoding

converting JSON data fetched from an API into state using setState

My goal is to properly map a JSON response into a state by excluding the first array and only displaying its children. Here is an example of what I have attempted: fetch(api).then((response) => { response.json().then((data) => { data.children. ...

javascriptarraysjsonreactjsmapping

Switching between custom dropdowns in Angular

I've implemented a custom dropdown selector with the functionality to toggle when clicked anywhere else on the browser. The toggleModules() function is responsible for handling the toggling within the dropdown. Data: modules=["A", "B", "C", "D", "E", ...

javascriptangularjs

Incorporating promises with ajax to enhance functionality in change events

Consider the scenario where you trigger an ajax request upon a change event in the following manner: MyClass.prototype.bindChangeEvent = function(){ $(document).on('change', '#elementid', function(){ var $element = $(this); $ ...

javascriptjqueryajaxpromise

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

I am working on creating a feature on a webpage where clicking a button will change the HTML code inside a specific div. Essentially, I want to be able to update the content of a div by simply clicking a link. Here are two different sets of HTML code: Co ...

javascripthtmlcss

Ways to extract a value from an object with no properties using jQuery

In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...

javascriptjqueryajaxdatatables

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

javascriptjqueryhtmlcss

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

javascript

Alter the background color of a div contingent on the checkbox being checked within

I am in search of a solution to modify the background color of a parent div that contains a checkbox. The condition is that the background color should only change when the 'checked' attribute is present within the tag. HTML <div class="comp ...

javascriptjquerycheckboxchecked

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

javascriptjqueryhtmlnode.js

Accessing an item within a JSON object using jQuery

Trying to access an element within a JSON object, part of the code is shown below: { " academy": { "business": { "E-commerce": [ I have successfully accessed the academy as the first element using the following code: $.getJSON("p ...

javascriptjqueryjson

SelectBoxIt jquery plugin can be applied after the completion of populating options in the select element with AngularJS

Utilizing AngularJS, I am dynamically populating a select box with the code below: <select ng-model="department" ng-options="dept as dept.name for dept in departmentList" class="fancy"> <option value="">-- select an optio ...

javascriptjqueryangularjs

Unable to fetch the number of items for ng-repeat pagination

I am currently working on setting up pagination within my ng-repeat template. I came across a code snippet on How to do paging in AngularJS?, which led me to this jsfiddle example: http://jsfiddle.net/dalcib/J3fjc/. My implementation closely resembles the ...

angularjs

Will refreshing just a specific component update the entire page or only that particular component that was altered?

As a newcomer to React, I am thoroughly enjoying the experience so far. However, I have a basic question that is currently unclear to me. Specifically, I am in the process of learning how to lift the state of a component, and I have a reproducible example ...

javascriptreactjs

The semantic-ui-react searchable dropdown feature may not show all of the options from the API right away

For some reason, when I attempt to call an API in order to populate the options for semantic UI, only a portion of the options are displayed initially. To view the full list, I have to first click outside the dropdown (blur it) and then click inside it aga ...

javascriptreactjssemantic-uisemantic-ui-reactreact-state-management

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9. My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is ...

javascriptfirebasereact-nativegoogle-cloud-firestore