在Javascript / JQuery中,可以通过以下步骤实现在第一次加载页面时加载当前日期,并在更改页面后保存日期:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
$(document).ready()
函数来执行代码。在该函数中,可以使用Date()
对象获取当前日期,并将其显示在页面上。代码示例如下:$(document).ready(function() {
var currentDate = new Date();
var formattedDate = currentDate.toLocaleDateString(); // 格式化日期为字符串
$("#date").text(formattedDate); // 将日期显示在id为"date"的元素中
});
在上述代码中,我们使用了JQuery的选择器$("#date")
来选中id为"date"的元素,并使用.text()
函数将日期显示在该元素中。
localStorage
对象将日期存储在浏览器的本地存储中。代码示例如下:$(document).on("change", function() {
var currentDate = new Date();
var formattedDate = currentDate.toLocaleDateString(); // 格式化日期为字符串
localStorage.setItem("savedDate", formattedDate); // 将日期保存在localStorage中
});
在上述代码中,我们使用了JQuery的.on()
函数来监听页面的变化事件。在事件触发时,我们再次获取当前日期,并使用localStorage.setItem()
函数将日期存储在名为"savedDate"的键中。
$(document).ready()
函数中添加以下代码:$(document).ready(function() {
var savedDate = localStorage.getItem("savedDate"); // 获取已保存的日期
if (savedDate) {
$("#date").text(savedDate); // 将已保存的日期显示在id为"date"的元素中
}
});
在上述代码中,我们使用localStorage.getItem()
函数获取名为"savedDate"的键对应的值,即已保存的日期。如果存在已保存的日期,则将其显示在页面上。
通过以上步骤,我们可以实现在第一次加载页面时加载当前日期,并在更改页面后保存日期的功能。请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行适当的修改和优化。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云