简体   繁体   中英

Removing 1Item from a Growing Array stored in Session Storage

So I have an array stored in session storage that is constantly increasing, like adding items to a shopping cart, in this case its a music list. I have this displayed in a table format. My table is in a For Loop, for each iteration of the loop a Row is made consisting of the items properties(they are stored in the array in session storage), this being Title:, Artist:, Album:, Genre: and each item has a Edit and Remove button at the end of them. Basically I want the Remove button to be able to work. I want the Remove button to only remove that one Row/Item of the array, not the whole array. My array is stored with the Key[musicList] and the Value looks like the code below(its in a array):

[{title: "Rainbow", artist: "Jane", album: "SunnyBox", genre: "Melody"},…]

0: {title: "Rainbow", artist: "Jane", album: "SunnyBox", genre: "Melody"}

album: "SunnyBox"

artist: "Jane"

genre: "Melody"

title: "Rainbow"

1: {title: "Blue", artist: "Joe", album: "Azure Sea", genre: "Rock"}

2: {title: "Gear", artist: "Romero", album: "Basset", genre: "Metal"}

3: {title: "Amber", artist: "Amy", album: "Amy Coll", genre: "Soul pop"}

Here's a pic of the code in the browser. Music Table List in Browser

This is the part of the code that is supposed to remove the 1 item of the array, but its not working, since the array is also being updated with new items:

    //This code is the Remove buttons EventListener
    button2.addEventListener("click", function(){
        let arrayOfMusic = JSON.parse(sessionStorage.getItem("musicList"));
        arrayOfMusic.splice([i], 1);
        sessionStorage.setItem('musicList',JSON.stringify(musicList));
    })

Here is a pic of the rest of code pertaining to the Music Table. Music Table List JavaScript

Someone Please Help.

<button id="btn1">ClickMe</button>
<script>
sessionStorage.setItem("musicList", JSON.stringify([
{title: "Blue", artist: "Joe", album: "Azure Sea", genre: "Rock"}, 
{title: "Gear", artist: "Romero", album: "Basset", genre: "Metal"},
{title: "Amber", artist: "Amy", album: "Amy Coll", genre: "Soul pop"} ]));

document.write(sessionStorage.getItem("musicList"));

let button2=document.getElementById("btn1");
button2.addEventListener("click", ()=>{
let music=JSON.parse(sessionStorage.getItem("musicList"));
music=music.splice(1);

sessionStorage.setItem("musicList", JSON.stringify(music));
console.log(sessionStorage.getItem("musicList"));
})

</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM