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

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js

For those who need the code snippets, you can find them for download here: index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <!-- CSS placement for legend and fold change --> </head> <body ...

Using React JS to iterate over an array and generate a new div for every 3 items

It's a bit challenging for me to articulate my goal effectively. I have a JSON payload that looks like this: { "user": { "id": 4, "username": "3nematix2", "profile_pic": &qu ...

Is it possible for a MUI control to automatically close itself when clicked outside of the component?

Currently diving into the world of MUI 5 component design. Does anyone know where I can locate the code responsible for closing a component when clicking outside of it? I've searched through the source code but couldn't pinpoint it. This functi ...

React: Implementing localStorage token addition in loginHandler function using State hook is not functioning as expected

I've implemented an AuthContextProvider in my React application to handle user authentication and logout functionality: import React, { useState } from "react"; import axios from "axios"; import { api } from "../api"; co ...

Unspecified error with Laravel request

Currently, I am a novice in Laravel and still in the process of exploring everything. I have been using Angular HTTP post to transfer data to Laravel, and in the Laravel controller, I have successfully used dd($request) to debug the request object: dd($re ...

Synchronous execution of functions in Node.js

I need to ensure that func2 is only called after func1 has completed its execution. { func1(); func2();// } However, the issue arises when func1() starts running and func2() does not wait for it to finish. This leads to a runtime error as func2() require ...

Using Nested ng-repeat for Values and Keys in Angular

Struggling with implementing nested ng-repeats in my code. I have a JSON object with multiple layers and attempting to iterate through them to display the data. Here is the structure of the JSON: { "status": "success", "data": { "Mat": { "tota ...

Encountering Issues with File Uploads in Express.js with Multer

Currently, I am immersing myself in Node.js through the guidance of a book titled "Web Development with Nodejs and MongoDB." However, I have hit a roadblock when attempting to upload an image using Multer. The code snippet causing me trouble is as follows: ...

Efficiently incorporating multiple properties into one in Angular

Within my Angular service, I have defined variables in the following manner: export class MyService { someVariableA = 1; someParams = { someVariableB, otherVariable: this.someVariableA }; } In a component, I update 'someVariableA&a ...

Using curl to send a PUT request with data from a file containing variables

I've written a bash script that looks like this: #!/bin/bash while read fqdn hostname; do curl -H "Content-Type:application/json" -XPUT "https://server/api/hosts/${fqdn}" -d '{"host":{"name": "'${hostname}'"}}' --cacert bundle.pe ...

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

Experiencing a performance problem when toggling the visibility of all "tr.content" elements within a complex dom structure like this:    <tbody class="collapsible">        <tr class="handler">            <td>Collaps ...

Fixing the department display list in React Hook: A step-by-step guide

{ roomDept.map((item, index) => ( <div key={index} className="flex flex-col pb-2 items-center"> <div className="flex pb-2 w-full"> <SelectPick ...

JS form validation malfunctioning

XHTML <form name="suggestion" method="post" action="suggestion.php" class="elegant-aero" onSubmit="return validate()" > <label> <span>Message :</span> <textarea id="Message" name="m ...

Efficiently manage large datasets with Vue.js using the expand/collapse list AJAX pattern

Within my vuejs application, there is a page where I aim to showcase a list of clients. When a user expands an individual client row, it should reveal a list of proposals specific to that client. Additionally, there is an expand/collapse functionality for ...

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

After installing node.js using the Windows installer, I noticed that the folder structure created was C:\Program Files\nodejs\node_modules\npm\node_modules. It seems like all the module folders are in the last node_modules director ...

Transform mysql data in bulk to json format with php

I am struggling to convert a large amount of MySQL data into JSON using PHP. With over 20,000 records, I can't seem to successfully convert the MySQL data into JSON format for my REST API. Here is the code I have attempted so far: $query = mysql_qu ...

How to use jQuery to dynamically assign a class to an li element

I'm attempting to use jQuery to add the 'block' class to specific li elements, but for some reason the class isn't being applied. The goal of the program is to display time slots and disable certain ones if they are blocked. Here's ...

Is it possible to retrieve only the attributes in an array?

https://i.sstatic.net/E1DMb.png I am working with an array that has properties embedded within it. I am wondering if there is a method to separate out these properties from the array data and transform them into a distinct object containing only the prope ...

Advantages and disadvantages of distinct methods for looping through HTML elements

My JS code generates HTML elements that are structured like this: <div id="container"> <div id="block_1" class="blocks"></div> <div id="block_2" class="blocks"></div> <div id="block_3" class="blocks"></di ...

Using Angular's ng-repeat directive in combination with checkboxes allows for easy manipulation of checkboxes in a web application. One

I have a set of checkboxes that generate tags in a textarea. When a user removes a tag, I want the corresponding checkbox to be unchecked as well. It's crucial that when a user navigates away from the page and returns, the checkboxes retain their pre ...