Javascript 如何使用html中的localStorage保存表中的数据和行

我想用此代码的数据保存行，我知道你可以使用

localStorage

，但我不知道如何操作。我是否需要添加另一个按钮来保存数据，或者我可以在单击“保存”按钮或自动保存时进行保存

这段代码有一些错误，比如如果你尝试添加两次相同的图片，它将无法工作。 它必须稍微清理一下，但我以后会修好的

var r=1；
var-nrr=1；
var-img=0；
变量y；
var-nr；
var z；
var i；
var图像；
var imgUrl；
var x=document.getElementById（“myTable”）.insertRow（r）；
函数文件更改（事件）{
imgUrl=URL.createObjectURL（event.target.files[0]）；
}
var loadFile=函数（事件）{
image=document.getElementById（di）；
image.src=imgUrl；
}
行内函数（id）{
//if（imgUrl！==未定义和&document.getElementById（“Kodi”）.value！==“”和&document.getElementById（“Kodi”）.value！==“”）{
r+=1；
x=document.getElementById（id）.insertRow（r）；
nr=x.insertCell（0）；
y=x.insertCell（1）；
z=x.insertCell（2）；
i=x.insertCell（3）；
y、 宽度=200；
z、 宽度=200；
i、 宽度=100；
宽度=50；
z、 高度=240；
i、 高度=240；
nr.高度=240；
nr.style=“文本对齐：居中；字体大小：20px；”；
z、 class=“z”；
i、 class=“i”；
nrr+=1；
nr.innerHTML=nrr-1；
y、 append=“img”；
x、 id=“r”+nrr；
var di=“y”+nrr；
y、 innerHTML=“”；
z、 innerHTML=“
”
i、 innerHTML=“
”
document.getElementById（“y1”）.id=di；
document.getElementById（di）.src=imgUrl；
document.getElementById（di）.class=“yy”；
imgUrl=未定义；
document.getElementById（di）.title=“”；
document.getElementById（“zp”）.innerHTML=document.getElementById（“Kodi”）.value；
document.getElementById（“ip”）.innerHTML=document.getElementById（“sh”）.value；
document.getElementById（“sh”）.value=“”；
document.getElementById（“Kodi”）.value=“”；
// }
}
函数delRow（）{
如果（r！=0）{
document.getElementById（“myTable”）.deleteRow（-1）；
r-=1；
nrr-=1；
}
}
函数save（）{
document.getElementById（'y1'）.src=imgUrl；
}

文件{
高度：100px；
}
p{
文本对齐：左上角；
左侧填充：10px；
字体大小：25px；
}
柯迪先生{
宽度：185px；
}
嘘{
宽度：90px；
}
.删除{
位置：绝对位置；
左：550px；
}
#我的桌子{
宽度：523px；
高度：60px；
}
img{
最大高度：300px；
最大宽度：200px；
}
.保存{
位置：绝对位置；
左：500px；
}
div{
宽度：700px；
高度：1000px；
溢出y：自动；
}

Kodi:
施泰斯：
拯救







天然橡胶
形象
科迪
施泰斯

是否要将表“myTable”的数据保存到localStorage？是的，但如果我为例如2行创建img和text，我希望保存。因此，您希望保存“#myTable”的数据，并希望在向表中添加其他内容时自动更新该数据？我希望在需要时保存数据，如果不能自动保存，则使用按钮。您可以以

HTMLCollection

的形式获取表的数据，然后迭代这些元素并提取它们的数据，然后调用

localStorage.set

方法，使用键和要存储的值。