Storing information in local storage as JSON using AngularJS

I am working on a form with the following fields:

<form ng-submit="addState()">
            <input ng-model="text1" type="text">
            <input ng-model="text2" type="text">
            <input ng-model="text3" type="text">     
</form>

In addition, I have some JavaScript code:

mainAppControllers.controller('DoarScanCtrl', ['$scope', '$routeParams', '$location',
    function($scope, $routeParams, $location){

    }
]);

My goal is to first save the data in local storage and then convert it into JSON format.

Any assistance with this would be greatly appreciated. Thank you!

Answer №1

If you're looking for a useful library, I highly suggest checking out this one: https://github.com/grevory/angular-local-storage. It has the added benefit of automatically converting objects and arrays to JSON.

localStorageService.set("model", $scope.model);

$scope.model2 = localStorageService.get("model");

I've created a demo on how to use it here: http://jsfiddle.net/jgs4280c/

Answer №2

After experimenting with various local storage packages, I ultimately decided on utilizing https://github.com/agrublev/angularLocalStorage

While it may be simplistic in nature, its reliability surpasses that of other options I have tried.

Furthermore, the flexibility to either bind ng-model directly to the local storage key or use legacy getter/setter methods adds versatility to the implementation.

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

Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

My goal is to showcase the details from the given object on the user interface using Angular's ng-repeat. It is essential for me to arrange the key/value pairs based on their values and exhibit them in sequential order in an array from highest to lowe ...

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

React Ant Design: Toggle Visibility of Columns

Seeking a method to toggle the visibility of columns for the Table Component in Ant Design. The goal is to include a checkbox next to each column name. When unchecked, the column should be hidden. In my previous experience with react-table, accomplishing ...

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

I'm having some issues with my code. I am attempting to use passport authenticate in order to save patient information that is specific to the token generated for each individual. router.get("/current", passport.authenticate("jwt", { session: false }) ...

JavaScript: Different ways to utilize the reduce method

Creating an array for search purposes based on a string like BBC Sport, the desired output array will be: [ 'BBC', 'BB', 'B', 'Sport', 'Spor', 'Spo', 'Sp', 'S' ] An implement ...

MUI Tutorial: Displaying Text with Line Breaks

Whenever I input text into the MUI Textfield, it displays without any line breaks. Is there a more effective solution available? <Stack direction="row" alignItems="start" justifyContent="start" mb={5}> <TextFie ...

Draggable HighStock element causing issues with Gridster dragging

I have integrated a stocks chart from HighStocks with gridster, where each gridster block is draggable. However, the stocks time slider gadget can also be dragged and resized. When I move the slider on top of a gridster widget, the entire widget moves alon ...

I am utilizing client-side JS to send a large number of requests. What methods can I implement to enable my server to cache this content

Here's a bit of an unusual question from someone who is new to this - I have client-side JavaScript that is making API calls using the getJSON method. Since the content doesn't change frequently, I would like to store the results on my server an ...

Utilize Next.js with Axios for making an HTTP request to a Laravel Lumen endpoint, then showcase the retrieved data within the Next.js

I currently have a Next.js application that utilizes Axios to make calls to Lumen endpoints. The Axios HTTP client functions are organized in a separate folder named services/index.tsx, with sample code as follows: export const register = async (payload: a ...

Creating a customized JSON object with Laravel framework

Hey Team, I'm facing an issue with structuring my JSON output correctly. What I have in mind is the desired output below: { comments: { data: { created_at: "date", other: "etc", from: { username: ...

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Currently, I am utilizing the file toggle.js within the Urban theme. In the HTML chatbox, using the img, the file toggle.js is hardcoded and is functioning properly. However, when implementing code in Angular 6, the toggle.js is not functioning as expecte ...

Can express-handlebars tags be utilized within an HTML script tag when on the client side?

For a while now, I've been facing a challenge. I'm in the process of building an application with express-handlebars and so far everything is going smoothly. The data that needs to be displayed on the webpages looks good thanks to the Helper func ...

Error: The property 'parentNode' cannot be read because it is null

I wanted to test if my laptop can handle WebGL by loading examples from my instructor's webpage. The examples on the webpage worked fine, just showing a square within a square. I then decided to copy the exact codes into a notepad text editor, saved t ...

Something seems to be preventing Div from appearing and there are no error messages appearing

I've been attempting to create a menu, but the toggle div for the menu isn't visible Following a tutorial where an individual sets up a menu, there is a div with a menu icon in the top left corner. Despite meticulously copying the code from the ...

When working with AngularJS, you can enhance your application by implementing a global AJAX error handler if one has

Is there a way to set a global AJAX handler that will only be called if an error handler is not already defined for a specific AJAX call? Some of my AJAX calls need to execute certain logic if an error occurs (such as re-enabling a button), while others s ...

Unable to pass an Array to the Controller

let formData = new FormData(); payloadData = JSON.stringify(payload.unitDoctors); for (var prop in payloadData) { formData.append(prop, payloadData[prop]); } axios({ method: "put", url: apiUrl + payload.id, data: formData }) .then(resp ...

Issues with the initial calculator project I built using JavaScript (excluding HTML and CSS)

My first calculator is nearly complete, but I have encountered a challenge. The functionality of my calculator is quite simple; it prompts the user for input using window.prompt and performs addition, subtraction, multiplication, or division based on the u ...

Can a specific section of an array be mapped using Array.map()?

Currently, I am working on a project utilizing React.js as the front-end framework. There is a page where I am showcasing a complete data set to the user. The data set is stored in an Array consisting of JSON objects. To present this data to the user, I am ...

Why is the use of `display:none` for the "Select an option" in AngularJS?

Here is the code snippet for displaying a default "select an option" message in a dropdown menu (select element). <select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" > <option ...

Converting JSON to an array in PHP, looping through the array, and displaying as a

Upon receiving the following JSON object in an HTTP request: { "name": "myjsonstring", "statisticalvalues": [ { "key_0":"677876" }, { "key_0":"0" } ], "commoditycodes": [ { "key_0":"90001000" }, { "key_0":"80001000" } ] } ...