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.

https://i.sstatic.net/T4bjG.jpg

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

Entering credit card information in a modal popup using Bootstrap form

I have implemented a bootstrap modal for my credit card payment form and now I want to validate the credit card information. Currently, I am using basic validation in jQuery. <script> $(function() { $('#error_message_reg').text(""); //$( " ...

The comparison between "rxjs-tslint" and "rxjs-tslint-rules" npm packages

Previously, I utilized the rxjs-tslint-rules package to identify RxJS-related issues in my projects. This package was included in the devDependencies section of my projects' package.json files. Now, there is a new rxjs-tslint package that introduces ...

Is it possible to modify an HTML element when hovering over it in an ASP.Net page?

Is there a way to use jQuery to show the child span text - SomeClassChild3 string when hovering over the parent div - SomeClassParent in an aspx page? Here is the JavaScript section of the code: function ShowDiv(Somedata){ for(var v in Somedata){ va ...

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

What is the best way to assign a value to the param tag of an applet using JavaScript variables

This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...

The status value in the result has a whitespace just before the term "success"

Apologies for the unclear question, but I encountered a strange bug in my code. I am trying to show an alert to users informing them that the updates have been successfully completed. Below is the code snippet containing an if() block where the alert shoul ...

Tips for showing various column information as tooltips in ag grid's pivot mode

var ColumnDefinitions = [{ headerName: "Column A", field: 'colA', rowGroup: true }, { headerName: "Column B", field: 'colB', pivot: true, enablePivot: true }, { headerName: "Column C", field: ...

How can I change an element using jQuery's getElementById method?

My current setup involves using a web page as a server and an Arduino as a client. Whenever a specific mode is active, the Arduino sends the following code: <LED>on</LED> The server then adjusts its status accordingly based on this input. I ...

Adjust the contents of an HTTP POST request body (post parameter) upon activation of the specified POST request

Is there a way to intercept and modify an HTTP Post Request using jQuery or JavaScript before sending it? If so, how can this be achieved? Thank you. ...

Vue-moment displaying incorrect time despite timezone setting

Feeling a bit puzzled about my Laravel 8 application. I store time in UTC with timestamp_no_timezone in my PostgreSQL database. When I check the time in the database, it displays today's date with 13:45 as the time. However, when I use vue-moment and ...

In a Vue Application, the static HTML elements are loaded before fetching data

Utilizing VueJS and VueRouter in my application has presented a challenge. The issue lies in the fact that static HTML elements within the Vue Component load before the data is fetched, resulting in empty forms and tables being displayed initially. I have ...

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

Submitting information retrieved through an AJAX request to a MySQL database using PHP

I have implemented a JavaScript function to collect and display data, but now I am looking to save this data into a MySQL database for tracking purposes. I attempted to connect to the MySQL database locally using PHP code, but encountered some issues. I be ...

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

Enhanced data visualization with Material UI's nested datagrid feature

Is there a way to display nested JSON data on a React Material UI data grid? I'm looking to showcase the phone numbers of users from the JSON in the provided sandbox example. You can check out the demo here. ...

Tips on showing database information with JavaScript

<script type="text/javascript"> var content = { metadata: ['January', 'February', 'March', 'April'], infoSets: [ { fillColor: "rgba(220,220,220,0.2)", strokeCol ...

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Mobile browsers such as Safari have a tendency to ignore large files when passed in through the <input type="file">. For example, testing with a 10mb image file results in no trigger of any events - no change, no error, nothing. The user action is si ...

Discovering the most cost-effective combination algorithm

Looking for two numbers, P and Q, in a given array N with at least 5 items where 0 < P < Q < N - 1. Consider the following array: const N = [1, 9, 4, 5, 8]; If P = 1 , Q = 2 , then the cost is N[P] + N[Q] = N[1] + N[2] = 9 + 4 = 13 If P = 1, Q ...

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...