我目前有一个可以单击图像的站点，它将返回一个新图像，并且在以前的网格项中，它将返回我单击它的日期和时间。我想要的是拥有这个但我也可以在关闭并重新打开浏览器后看到更新的图像和点击时间。- 实现这一目标的最简单/最快的方法是什么？我觉得添加到我的数据库将是一种前进的方式，但如果这是我需要做的，我将如何根据我点击的时间来存储和输出时间？（这不是一个实时站点，也不是供其他人查看或使用的，因此本地快速修复是可行的）。foreach ($flavours as $key => $flavour) { echo "<div class='grid-container'>"; echo "<div class='item7'><p id='p3'>Sylus: </p></div>"; echo "<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>"; echo "</div>";}function cS(element) { if (element.src == "htts://i.i.com/k.jpg") { element.src = "http://i.i.com/v.jpg"; var d = moment().format('dddd HH:mm'); element.parentElement.previousElementSibling.firstChild.innerHTML = "Sylus: " + d; } else { element.src = "htts://i.i.com/k.jpg"; element.parentElement.previousElementSibling.firstChild.innerHTML = "Sylus: "; }}
2 回答
开心每一天1111
TA贡献1836条经验 获得超13个赞
使用localStorage. 这会<p>在 body 中找到标签元素，然后使用每个元素获取 id 以供参考。
我尝试在这里使用小提琴，但该网站对 localStorage 有安全投诉。
将此代码复制/粘贴到文件中以尝试一下。请注意，您可能需要更新moment.js此代码中的引用以匹配您的文件路径。
<!doctype html>
<html>
<head>
<title>localStorage example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="moment.js"></script>
</head>
<body>
<div class='grid-container'>
<div class='item7'><p id='p0'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<div class='grid-container'>
<div class='item7'><p id='p1'>Sylus: </p></div>
<div class='item8'><img src='htts://i.i.com/k.jpg' onclick='cS(this)' /></div>
</div>
<script>
function cS(element) {
var pTag = element.parentElement.previousElementSibling.firstChild;
if (element.src == "htts://i.i.com/k.jpg")
{
element.src = "http://i.i.com/v.jpg";
var d = moment().format('dddd HH:mm');
var pText = 'Sylus: ' + d;
pTag.innertHTML = pText;
// Set (save) a reference to browser localStorage
localStorage.setItem(pTag.id, pText);
}
else
{
element.src = "htts://i.i.com/k.jpg";
pTag.innerHTML = "Sylus: ";
// Remove the stored reference. (delete this if not needed)
localStorage.removeItem(pTag.id);
}
}
$(document).ready(function() {
pElements = $('body').find('p').each(function(index, element) {
// Get the localStorage items. The retrieved <p> elements,
// we use their id value to reference the key in storage.
storageItem = localStorage.getItem(element.id);
if (storageItem) {
$('#' + element.id).text(storageItem);
}
});
});
</script>
</body>
</html>
单击图像后（需要替换为真实的图像），打开浏览器的 Web 检查器界面，单击Storage选项卡，然后展开列表中的本地存储（见下图），然后选择正在测试的文件。
将显示键/值对。键是对<p>标签 ID 的引用，值将具有标签日期字符串，例如Sylus: Wednesday 22:28.
一旦您看到一个或两个条目被设置为存储，请关闭然后重新打开浏览器选项卡。具有日期的<p>元素应该从存储中重新加载它们的值。
浏览器的 Local Storage 区域应该类似于下图：
- 2 回答
- 0 关注
- 143 浏览
添加回答
举报
0/150
提交
取消