正在创建事件侦听器以从本地存储中删除对象

Creating Event Listeners to Delete Objects from localStorage

本文关键字：存储 删除 对象 创建 事件 侦听器      更新时间：2024-03-05

我正在处理一个待办事项列表。我正试图为添加到窗口中的每一行创建一个"deleteThis"函数。到目前为止，我可以保存、清除（表单）和清除（存储）。但我也希望能够通过在每一行的末尾添加一个td来删除单独的行。结果应该是有效的，这样用户就可以单击X从本地存储中删除该行。

HTML/CSS

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Local Storage</title>
<style>
body {
background:#999;
overflow:hidden;
}
.c1 {
font-family: 'Open Sans', sans-serif;
font-weight:800;
font-size:120%;
border:none;
border-radius:3.33%;
padding:24px 5px;
width:600px;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-moz-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-background-clip: padding-box;
outline: 0;
}
#tbl {
background:#F9FBFF;
padding:8px 7px;
border-radius:2%;
}
:focus { 
outline:0;
}
#tableRNDR {
background:#F9FBFF;
border-radius:2%;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:110%;
margin:auto;
position:relative;
width:700px;
overflow:hidden;
}
th, td {
padding:18px 24px;
}
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
color: #666;
height: 12px;
position: relative;
width: 12px;
}
input[type="time"]::-webkit-clear-button {
display: none;
}
#wrapper {
width:700px;
font-size:150%;
margin:auto;
}
#btnWrapper {
margin:auto;
width:400px;
}
.btnsC {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
cursor:pointer;
color:#666666;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:17px;
padding:6px 24px;
text-shadow:0px 1px 0px #ffffff;
}
.btnsC:hover {
background-color:#e9e9e9;
}
.btnsC:active {
position:relative;
top:2px;
}
</style>
</head>
<body>
<div>Ehawk's Planner V2.3</div>
<div id="wrapper">
<table style="width:100%;" id="tbl"> 
<tbody><tr>
<td> 
    <input id="txtpname" type="text" class="c1" placeholder="Name" />
</td> 
</tr> 
<tr> 
<td> 
    <input id="txtpaddr" class="c1" placeholder="Description" />
</td> 
</tr> 
<tr> 
<td> 
    <input id="txtpcity" type="time" class="c1"  placeholder="Time" />
</td> 
</tr> 
<tr> 
<td> 
    <input id="txtpemil" type="date" class="c1"  placeholder="Date" />
</td> 
</tr>
</tbody></table>
<br>
<div id="btnWrapper">
<input id="btnsave" class="btnsC" type="button" value="Save">
<input id="btnclear" class="btnsC" type="button" value="Clear"> 
<input id="btnclearstorage" class="btnsC" type="button" value="Clear        Storage">
</div>
<div id="dvcontainer"><br>
</div>
</div>
</body></html>

Javascript

 <script>
(function () { 
//Goals Object
var Goals = { 
Name: "", 
Descript: "", 
timeVal:"", 
dateVal: ""
};
var Uilogic = {
//Clear all
clearuielements: function () { 
var inputs = document.getElementsByClassName("c1"); 
for (i = 0; i < inputs.length; i++) { 
    inputs[i].value = ""; 
} 
},
//Save to LS
saveitem: function () {
var lscount = localStorage.length; //Length
var inputs = document.getElementsByClassName("c1");
        Goals.Name = inputs[0].value; 
        Goals.Descript = inputs[1].value; 
        Goals.timeVal = inputs[2].value; 
        Goals.dateVal = inputs[3].value;
//Convert to JSON/Store it
        localStorage.setItem("Goals_" + lscount, JSON.stringify(Goals)); 
        location.reload(); 
},
//Load Data from LS 
loaddata: function () { 
var datacount = localStorage.length; 
if (datacount > 0) 
{ 
    var renderData = "<table id='tableRNDR'>"; 
    renderData += "<br /><tr><th>Id</th><th>Name</th><th>Description</th>   <th>Time</th><th>Date</th><th></th></tr>"; 
    for (i = 0; i < datacount; i++) { 
        var key = localStorage.key(i); //Get Key 
        var Goals = localStorage.getItem(key); //Get Data
        var data = JSON.parse(Goals); //Parse Data
        var iCount = i + 1;
        renderData += "<tr><td>" + iCount + "</td><td>" + data.Name + "   </td>"; 
        renderData += "<td>" + data.Descript + "</td>"; 
        renderData += "<td>" + data.timeVal + "</td>"; 
        renderData += "<td>" + data.dateVal + "</td>";
        renderData += "<td id='xData'>" + "&timesb;" + "</td>";
    } 
    renderData+="</table>"; 
    dvcontainer.innerHTML = renderData; 
} 
},
//Clear 
clearstorage: function () { 
var storagecount = localStorage.length; //Count 
if (storagecount > 0) 
{ 
    for (i = 0; i < storagecount; i++) { 
        localStorage.clear(); 
    } 
} 
window.location.reload(); 
}
};
//deleteThis
//Save
var btnsave = document.getElementById('btnsave'); 
btnsave.addEventListener('click', Uilogic.saveitem, false); 
//Clear all
var btnclear = document.getElementById('btnclear'); 
btnclear.addEventListener('click', Uilogic.clearuielements, false); 
//Clear LS 
var btnclearstorage = document.getElementById('btnclearstorage'); 
btnclearstorage.addEventListener('click', Uilogic.clearstorage, false); 
//Onload
window.onload = function () { 
Uilogic.loaddata(); 
}; 
})(); 
</script>

此代码处理实际删除：

function deleteRow()
{
    //this refers to the delete button, it has an 
    //attribute called data-index with a reference to the key in LS
    localStorage.removeItem(this.getAttribute("data-index"));
    window.location.reload();
}

我编辑了添加删除按钮的行：

    renderData += "<td class='xData' data-id='xData' data-index='"+key+"'>" + "&timesb;" + "</td>";
    //set a data-id and data-index to this element, we need them to select the correct information.

我还添加了一些代码，将点击处理程序附加到所有删除按钮：

Array.prototype.map.call(document.querySelectorAll("td[data-id='xData']"), function(element){
    element.addEventListener("click", deleteRow, false); //attach a click handler to all delete buttons
} );

通常我会把它放在StackOverflow代码片段中，但localStorage无法正确处理代码片段，所以我把所有的更改都放在了JSFiddle中：http://jsfiddle.net/dy3c0fos/

相关文章：