Удаление из localstorage [как организовать удаление по уникальному айди]

Вопрос-ответ JavaScript
1

после того как пользователь ввёл соответствующую инфу в инпуты и нажал на кнопку ‘save’, инфа сохраняется в localstorage и появляется в таблице в месте с кнопкой ‘x’, задача: при нажатии на кнопку ‘X’ удалить соответствующую строку, не пойму как реализовать, вот весь код:

let data = localStorage.mardik
 if(data){
     data=JSON.parse(data)
     data.map(item=>{
        let tr=`
        <tr>
        <td>${item.anun}</td>
        <td>${item.azganun}</td>
        <td>${item.tariq}</td>
        <td><button class="btn btn-danger" id="clr">&times;</button></td>
         </tr>
            `
            document.querySelector('table')
                    .innerHTML+=tr
     })
 }
btn.addEventListener('click',()=>{
    let anun=first.value
    let azganun=last.value
    let tariq=age.value
     let obj={anun,azganun,tariq}
    if(!anun||Number(anun)){
        first.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        first.style.border='1px solid green'
        err.innerHTML=''
    }
    if(!azganun||Number(azganun)){
        last.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        last.style.border='1px solid green'
        err.innerHTML=''
    }
    if(!tariq||tariq<1||isNaN(tariq)||parseInt(tariq)!=tariq){
        age.style.border='1px solid red'
        err.innerHTML='ERROR'
        err.style.color='red'
    }else{
        age.style.border='1px solid green'
        err.innerHTML=''
    }
    let zangvac=localStorage.mardik
     if(age.style.border=='1px solid green'&&first.style.border=='1px solid green'&&last.style.border=='1px solid green'){
        if(!zangvac){
            zangvac=[obj]
         }else{
            zangvac=JSON.parse(zangvac)
            zangvac.push(obj)
        }
        localStorage.mardik=JSON.stringify(zangvac)
        
        location.reload()

     }
 })

 Array.from(clr).map(item=>{
     item.addEventListener('click',()=>{
         localStorage.removeItem(this.data)
     })
 })

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	
</head>
<body>
	<div class="container">
		<h1>Database</h1>
		<div class="row">
			<div class="col-md-4">
				<h3>Add new Person</h3>
				<h5 id="err"></h5>
				<div class="form-group">
					<label>Name</label>
					<input type="text" id="first" class="form-control">
				</div>
				<div class="form-group">
					<label>last</label>
					<input type="text" id="last" class="form-control">
				</div>
				<div class="form-group">
					<label>Age</label>
					<input id="age" class="form-control">
				</div>
				<div class="form-group">
					<button id="btn" class="btn btn-success">Save</button>
				</div>
			</div>
			<div class="col-md-8">
				<h3>Person List</h3>
				<table class="table table-dark">
					<tr>
						<th>name</th>
						<th>surname</th>
						<th>age</th>
						<th>actions</th>
					</tr>
					
				</table>
			</div>
		</div>	
	</div>

</body>
 </html>
2

Тебе нужен механизм для уникальной идентификации элементов в массиве который ты складываешь в localStorage. Самое простое это ситуации - присваивать каждому элементу уникальный айдишник. Айдишник можно генерировать самому с помощью Math.random или еще какого малострочного решения что найдешь в интернете. Для продакшена я бы рекомендовал что-то более универсальное типа uuid.

В обработчике удаления компонент будет знать про то элемент с каким айдишником удалить, удалит его из массива, перезапишет localStorage с удаленным элементом и вперед.

3

т.е. этим методом я смогу удалить как в таблице, так и в localstorage?

4

Да. В таблице можно “срезать угол” и просто удалить ряд для которого нажимался крестик.

В приложениях где есть state management (redux, mobx, angular, vuex) ты обычно меняешь модель (объект моделирующий приложение). В твоем модель - это список объектов. Потом фреймверк сам отражает изменения в твоем отображении (где ты предварительно описал как отображать данные из модели в компоненте).

5

В принципе ты можешь “обмазать” этим айдишником что угодно. Например добавлять класс, сгенерированный из айдишника HTML элементу и потом находить этот элемент зная айдишник элемента в списке.