What is the best way to delete a particular item from a local storage array in AngularJS?

This is the HTML code I have:

 <tr ng-repeat="student in students track by $index">
             //some code here
           <button ng-click="remove(student)">Delete</button>
            </td>
        </tr>

Then, in my .js file, I've written this code to remove a student (not from local storage):

$scope.remove = function(student) {
    var index = $scope.students.indexOf(student);
    $scope.students.splice(index, 1);
}

Now, I'm wondering how I can access local storage from my JavaScript code and delete a specific student from there.

Answer №1

It seems like it would be helpful to reword your question as "How can I retrieve browser local storage using JavaScript?"

To access localStorage in your JavaScript code, you can utilize the localStorage object. One approach could involve removing a student from the $scope.students array and then storing the updated array in local storage upon completion:

$scope.remove = function(student) {
    var index = $scope.students.indexOf(student);
    $scope.students.splice(index, 1);
    localStorage.setItem('students', JSON.stringify($scope.students));
}

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

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

Creating duplicates of a div element with each click

I am looking for a way to create a button (ADD) that, when clicked, generates a form with a field and a delete button. The form fields and the delete button should be erased when the button is clicked. <button type="button" class="btn btn ...

What is the best way to apply multiple array filters to an object list in react.js?

Looking to filter an array of items using multiple filter arrays in order to display only the items that match all selected filters. For example: The main array contains a table with the following data: ID TypeID LocationID Name 1 2 ...

"Utilize browser detection to direct users to appropriate pages - whether by using htaccess or another method

I'm in the process of creating a website and I've noticed that it looks quite bad on Firefox and IE. I was wondering if you could help me figure out how to redirect users to different pages based on the browser they are using. Since I am not an ...

fixing errors with express, angularJS, and socket.io

I am currently in the process of setting up Socket.io on my website using ExpressJS and AngularJS NodeJS server.js var express = require('express'); var app = express(); fs = require('fs'); // specifying the port ...

JQuery is unable to initiate a keyup event

I am currently utilizing jQuery in a web application. On one of my pages, I have set up an event listener for keypresses as shown below: document.addEventListener('keyup', function (event) { event.preventDefault(); var key = event.k ...

Enabling $sce.trustAsResourceUrl() across all platforms

Is there a way to implement something similar to this code snippet: $sce.trustAsResourceUrl('URL_HERE'); Specifically, is it possible to do this globally within the main app's config() or run() functions in order for all iFrames, img src, e ...

Having trouble with the "setValue" property being undefined error. Looking for a solution to input text into a codeMirror element using Selenium WebDriver with Java

Currently, I am attempting to input text into a textarea field that is recognized as CodeMirror. Below is the code snippet I have been working with: {... WebElement scriptField = this.getDriver().findElement(By.cssSelector(".CodeMirror-line>span")); ...

Show only specific data from JSON results

I am trying to display a specific cryptocurrency's price without the need for curly braces or explicitly stating "USD". Currently, it appears as {"USD":0.4823} when using the following code: <script> $(document).ready(function () { ...

Event on FullCalendar is directing to an incorrect URL

After integrating FullCalendar to my website following a tutorial, everything seems to be working fine except for the URLs added to events on the calendar. Instead of directing me to the specified URL when I click on an event, it redirects me to a differen ...

What are some solutions for addressing the viewport width problem that comes up when incorporating Google+ comments on a responsive website

My website looks great on both desktop and mobile devices without any viewport issues, until I added Google+ comments. These comments will automatically set the width of the page to a specified amount: <!-- Google comments --> <script src="https: ...

Start with Angular routing, then switch to mvc routing if needed

My project utilizes Angular and node.js on IIS 7.5 for the frontend, and a .NET Web API for backend calls. The Angular routing and API routing are working smoothly when testing with Visual Studio/IIS Express and ng serve. However, they run on separate por ...

Can anyone provide guidance on uploading data to a mongodb database? I've attempted a few methods but keep encountering errors

const info = { name, price, quantity, image, desc, sup_name, email } fetch('https://gentle-plateau-90897.herokuapp.com/fruits', { method: 'POST', headers: { 'content-type': 'application/jso ...

Error encountered during the execution of the store method in Ajax CRUD operation

Greetings, I'm encountering an error in my AJAX code every time I try to execute the store function https://i.sstatic.net/SW86I.jpg Below is my controller: public function store_batch(Request $request) { $rules = array( 'batch_name& ...

What causes the ERR_HTTP_INVALID_STATUS_CODE error to appear on my screen?

For my first project as a beginner, I decided to create a basic calculator which performs calculations on the server. Below is the code snippet from my .js file: const express = require("express"); const bodyParser=require("body-parser"); var app = expres ...

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...

Converting a single 10GB zip file into five separate 2GB files with the help of NodeJS

var fs = require('fs'); var archiver = require('archiver'); var output = fs.createWriteStream('./test.zip'); var archive = archiver('zip', { gzip: true, zlib: { level: 9 } // Sets the compression level. }); ...

Instructions on setting up a custom HTTPS server using the Alexa ask-cli

I am facing an issue with deploying my Alexa skill using the alexa-cli tool (https://www.npmjs.com/package/ask-cli). Whenever I try to deploy my skill with an https server, I encounter the following error: ◞ Creating new skill...Call create-skill err ...

Pass information from Vue JS v-for to a button when it is clicked

Just started learning Vue JS and encountered a small issue I'm currently looping through an array with a button inside the div I'm iterating over The goal is to grab the data of the selected item after clicking on the button For example, suppo ...

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...