javascript - localStorage.removeItem 无法正常工作。我该如何解决?
问题描述
我有这个代码用于保存来自 2 个输入的数据。当页面刷新两次(数据已保存)时,一切都很好,但在第三次刷新时,日期消失了。我知道这是因为localStorage.removeItem
,但我需要在标签消失后数据消失。
我对其他东西使用相同的方法,并且效果很好。但在这种情况下,这就是我所说的,只需要 2 次刷新。
<input type="date" id="exdated" name=""
onfocus="localStorage.setItem('myTestApp','exdated')"
onkeyup="saveValue(this);">
<br><br>
<input type="date" id="datata" name=""
onfocus="localStorage.setItem('myTestApp','datata')"
onkeyup="saveValue(this);">
<br><br>
let today = new Date().toISOString().slice(0, 10)
document.getElementById("datata").value = getSavedValue("datata");
document.getElementById("exdated").value = getSavedValue("exdated");
function saveValue(e) {
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue (v) {
if (!localStorage.getItem(v)) {
return today;
}
var itemcheta = localStorage.getItem(v);
localStorage.removeItem(v);
return itemcheta;
}
解决方案
由于您希望在浏览器选项卡关闭时数据消失,因此您应该使用sessionStorage
而不是localStorage
. 这将使浏览器在浏览会话关闭时处理正确的数据删除,因此需要担心的代码更少。
推荐阅读
- reactjs - 为什么当我更改孩子的值时父状态没有更新但它正在以相反的方式工作
- javascript - 如何使用 Vue JS 更改谷歌地图标记的颜色
- python - (Python) Google sheet API:仅附加不重复的行
- apache-kafka - KAFKA - 错误由于(kafka.server.BrokerMetadataCheckpoint)而无法写入 meta.properties
- css - 当父是位置时,相对子元素不可点击
- c# - 将标头请求和标头响应添加到 serilog 中间件日志记录
- mysql - 不正确的整数值:第 2 行 MySQL 中列“变量”的“H”
- html - Chrome:CSS计算样式有一小部分不同
- go - 如何在不尝试存储的情况下验证 golang 中的模板?
- python - aiohttp 会话的 NTLM 身份验证