如何從本地存儲中的陣列中刪除 object

Question

我正在嘗試通過識別其標題來從本地存儲中刪除筆記。 我檢查了 w3schools 和這個論壇的信息。 我可以保存數組，但是無法刪除特定的注釋。

我試過了，沒有改變，我試圖實現的一個例子，

這是我在刪除之前的本地存儲：

[{title: "洗衣店", content: "疊衣服"}, {title: "Cook", content: "買菜"}, {title: "Read", content: "去圖書館"}] 0: {title: "洗衣店", content: "疊衣服"} 1: {title: "做飯", content: "買菜"} 2: {title: "閱讀", content: "去圖書館"}

刪除后我想要的 output ：

[{title：“洗衣店”，內容：“折疊衣服”}，{title：“廚師”，內容：“買食物”}] 0：{title：“洗衣店”，內容：“折疊衣服”} 1：{標題：“廚師”，內容：“買菜”}

我希望能夠根據其標題刪除項目閱讀

const editNote = (e) => {
    saveContent.addEventListener('click', (e) => {
        e.preventDefault()
    
        let notes = []
        let note = {
            title: noteTitle.value,
            content: noteContent.value
        }

        // Parse the serialized data back into an aray of objects
        notes = JSON.parse(localStorage.getItem('items')) || [];
        // Push the new data (whether it be an object or anything else) onto the array
        notes.push(note);
       
        // Re-serialize the array back into a string and store it in localStorage
        localStorage.setItem('items', JSON.stringify(notes));
        // input.textContent = note.title 
    
        //remove notes by id
        const removeNote = () => {
            let title = noteTitle
            const index = notes.findIndex((note) => note.title === title)
    
            if (index > -1) {
                notes.splice(index,1);
            }
        }

        delNote.addEventListener('click', (e) => {
            removeNote()
            e.preventDefault()  

            // window.location.href='index.html'

        })

    })  

    
}

editNote()

Answer 1

更新數據后，您需要將項目設置為本地存儲

const removeNote = () => {
        let title = noteTitle
        const index = notes.findIndex((note) => note.title === title)
    
        if (index > -1) {
            notes.splice(index,1);
            localStorage.setItem('items', JSON.stringify(notes))
        }
    }

Answer 2

localStorage.removeItem('ITEM TO REMOVE');

參考： https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem

Answer 3

我最終想通了。 感謝大家的回復和提供指導。

 let input = document.querySelector('.input-bar') let addItem = document.querySelector('.submit-btn') let clearAll = document.querySelector('.clear-btn') // pay attension to indentation and ele location it will determine success addItem.addEventListener('click', (e) => { e.preventDefault() // Parse the serialized data back into an aray of objects items = JSON.parse(localStorage.getItem('items')) || []; // Push the new data (whether it be an object or anything else) onto the array items.push(input.value); item = input.value // Re-serialize the array back into a string and store it in localStorage localStorage.setItem('items', JSON.stringify(items)); var clear = document.createElement('button') clear.innerHTML= '<i class="fa fa-trash" style="font-size:20px;color: #ac2412"></i>' let itemsEl = document.getElementById('items') let para = document.createElement("P"); var t = document.createTextNode(`${input.value}`); para.appendChild(t); para.appendChild(clear) itemsEl.appendChild(para); input.value = '' clear.addEventListener('click', (e) => { itemsEl.removeChild(para) e.preventDefault() for (let index = 0; index < items.length; index++) { if (items[index] === para.textContent) { items.splice(index, 1) localStorage.setItem('items', JSON.stringify(items)); } } }) }) clearAll.addEventListener('click', (e) => { document.getElementById('items').innerHTML = '' localStorage.clear() })

 * { box-sizing: border-box; margin: 0; padding: 0; } body { color: white; background-color: black; margin: 40px 0px; text-align: center; } input { width: 300px; height: 46px; outline: none; background: transparent; border-color: silver; border-radius: 0; color: var(--mainWhite); font-size: 1.7rem; } h1 { margin: 20px 0px; }.submit-btn { margin: 0px 5px; width: 50px; height: 50px; outline: none; /* color: white; */ background-color: rgb(21, 96, 194); color: white; font-size: 1.7rem; }.items-list { list-style-type: none; } li { display: inline-flex; border: 1px solid slategrey; font-size: 22px; margin: 20px 0px 0px 0px; } button { outline: none; margin: 0px 0px 0px 200px; }.clear-btn { width: 100px; height: 40px; margin: 30px; outline: none; background-color: rgb(21, 96, 194); color: white; font-size: 20px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min:js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Groceries</title> </head> <body> <h1>Grocery List</h1> <div> <input class="input-bar" type="text"> <span> <button class="submit-btn"> <i class="fa fa-pencil" aria-hidden="true"></i> </button> </span> <ul class="items-list" id="items"></ul> </div> <button class="clear-btn">Clear</button> <script src="index.js"></script> </body> </html>