Storing repeated inputs in local storage multiple times

I am working on a feature where I need to store data in local storage multiple times using a dropdown menu and some input fields. Currently, I am able to retrieve all the values from the input fields and see them in the console log. My goal is to save these inputs into local storage as an object when the "Save" button is clicked. After changing the options and clicking again, I want to save another object in local storage.

browse.html

<ion-view view-title="Browse">
  <ion-content>
  <select id="vrstaribe" ng-model="selekt" ng-options="r as r for r in ribe" selected>
   <option value="">Vrsta ribe</option> 
  </select>
   <label class="item item-input">
   <input id="tezina" type="number" placeholder="Tezina">
   </label>
   <label class="item item-input">
   <input id="mamac" type="text" placeholder="Mamac">
   </label>
   <button class="button button-positive" ng-click="spremi()">Spremi</button>
  </ion-content>
</ion-view>

contollers.js

.controller('SpremiCtrl', function($scope) {
var ulov = {vrstaribe: '', tezina: '', mamac: '' };
var popisulova = [];

$scope.ribe = ["Saran", "Stuka", "Som"];

$scope.spremi = function() {

var vr = document.getElementById('vrstaribe');
var rib = vr.options[vr.selectedIndex].text;
var tez = document.getElementById('tezina').value;
var mam = document.getElementById('mamac').value;
console.log("Riba : " + rib + '\n' + "Težina : " + tez + '\n' + "Mamac : " + mam);
ulov.vrstaribe = rib;
ulov.tezina = tez;
ulov.mamac = mam;
popisulova.push(ulov);
console.log(ulov);

localStorage.setItem('ulov', JSON.stringify(ulov));
var vrati = localStorage.getItem('ulov');

//console.log('Ulov: ', JSON.parse(vrati));
console.log(ulov);

}

})

Answer №1

Although this solution will address your current issue, it seems like there are several other issues in your code that are not following the recommended Angular practices.

$scope.saveCatch = function() {

    var selectedFish = document.getElementById('selectFish');
    var fishType = selectedFish.options[selectedFish.selectedIndex].text;
    var weight = document.getElementById('weightInput').value;
    var bait = document.getElementById('baitInput').value;

    console.log("Fish Type: " + fishType + '\n' + "Weight: " + weight + '\n' + "Bait: " + bait);
    
    catch.fishType = fishType;
    catch.weight = weight;
    catch.bait = bait;

    var savedCatches = localStorage.getItem('catchList') || '[]';
    var parseCatches = JSON.parse(savedCatches);
    
    parseCatches.push(catch);

    localStorage.setItem('catchList', JSON.stringify(parseCatches));

    console.log(catch);

}

Answer №2

Utilize the ngStorage library by visiting https://github.com/gsklee/ngStorage

    angular.module('app', [
        'ngStorage'
    ]).controller('Ctrl', function($scope, $localStorage, $sessionStorage){

   // Add your custom code here!

});

For further guidance on using ngStorage in AngularJS, you can also check out How to use ngStorage in angularjs

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

Unusual characteristics of decision-making

Here is a snippet of my JavaScript code: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_") ...

The functionality of Vue slot-scope seems to be restricted when used within nested child components

Here is the component configuration being discussed: Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :ms ...

What is the best way to utilize node exec in synchronous mode?

I have a scenario where I need to run exec synchronously. Is there an alternative method to achieve this without using the deprecated execSync library? Can bluebird promises be used for this purpose? for (var i = 0; i < testCasesLength; i++) { va ...

Switch out "FOR" in order to sum up every value within an array

Utilizing Javascript, I have an array defined as follows: counts: [ { id: 1, value: 0 }, { id: 2, value: 10 }, { id: 3, value: 5 }, { id: 4, value: 3 } ] I aim to calculate a variable named total that holds the sum of all valu ...

Close specific child python processes as needed, triggered by a jQuery event

Having trouble managing child processes independently without affecting the main parent process in a web client using jQuery? Look no further. Here's my scenario: I've got a Flask server hosting a basic webpage with a button. Clicking the button ...

Is there a way to automatically send users to a different PHP file once they click "submit"?

I need to redirect to a different php file named index2.php. The username and password values are already set as follows: Username=sid, Password=yeaoklogin. When the user clicks on the Login button, they should be redirected to a page called index2.php. ...

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

Steps to resolve the error message "The port 9876 has no listening server when karma is running"

I have a situation where I am executing the following code: PS D:\app> karma run However, an error is being displayed: [2013-11-29 17:39:54.297] [DEBUG] config - Loading config D:\app\karma.conf.js There is no server listening on port ...

Uploading video files using XMLHttpRequest encountered an error on a particular Android device

One of our testers encountered an issue where they failed to upload a video file (.mp4) on a specific Android mobile phone. Interestingly, the same file uploaded successfully on an iPhone and another Android device. To investigate further, I attempted to ...

Learn the process of utilizing ng-class within ng-repeat to designate a specific class for individual iterative div elements

**On my homepage, I am displaying data retrieved from a MySQL database in cards. However, all the tags have the same color i.e. class="tag tag-pill tag-danger". To resolve this issue, I am using ng-class={{hos.class}} where class is a ...

Reacting - page is not refreshing

Describing my current scenario: I have a requirement where I need to be able to navigate to a /details page by clicking on an image. However, when I click on the image, the URL gets refreshed but my component does not load. I attempted various solutions ...

What is the process for creating a custom Javascript function that can seamlessly integrate with other Javascript libraries?

Is there a way to create a method that can be linked or chained to jQuery methods and other library methods? For example, consider the following code snippet: var Calculator = function(start) { var that = this; this.add = function(x) { start = start ...

In what way does Ionic determine the URL for input and send the password-protected email for logging in based on that URL?

I've set up a section for inserting the URL into the login form page using the following code: <ion-item> <ion-label floating>Company URL</ion-label> <ion-input type="url" value="" required></ion-input> </ion-item> ...

What is the best way to move the Grid upward when the above content is not visible?

Let me demonstrate what I have been working on. Currently, I am creating a weather application to explore the functionalities of https://material-ui.com/. I am attempting to prototype an animation inspired by Google Flights, which can be seen here: https: ...

A guide on using jQuery to iterate through 3 separate div elements

Seeking assistance with creating a dynamic loop for multiple divs (3 or more) using jQuery. The desired outcome is to have the main image div on the homepage rotate with other divs, changing both the background image and links within each div. I initially ...

Executing a component's method using HTML in Vue2

In my development project, there is a .vue file named ServiceList. This file imports the component called Information.vue. My objective is to execute the code from the Information component in a loop within the template of the ServiceList file. Here is an ...

What is the best way to halt execution in Express.js following an error caught from an Await request?

While searching for a solution, I come across many posts that almost provide the answer I need, but nothing seems to quite work in my case. I have a function that uses asynchronous operations: const doStuff = async (data)=>{ if(data == "a bug& ...

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Let's dive into the difference between AJAX and Fetch without involving CORS. I want to understand why an AJAX POST request works flawlessly while a Fetch POST request fails! Currently, I am using jQuery and AJAX for both GET and POST operations. Whe ...

Images are failing to show up in the iPhone design

Encountering issues with displaying images on an iPhone? You can replicate the problem by minimizing your browser window horizontally. Here is a link showcasing the problem: here. To temporarily fix this, try zooming out the browser (Ctrl+-). You can see a ...

Combining the power of Kendo UI with the flexibility of Vue

Hey there everyone, I'm currently utilizing the Vue.js CLI for my project. Recently, I came across a helpful tutorial on incorporating a Jquery plugin into a webpack project at this link: . To achieve this, I installed the expose loader and added th ...