javascript - 如何在使用 jQuery 重新加载页面后淡入和淡出成功消息？

Question

我搜索了很多这个主题并得到了很多不同的回复，但是，没有一个对我有用。

我有一个表单，当它成功提交时，会重新加载页面。

$('form').on('submit', function(event){
if($('#input').val() == 0){
    alert("Please insert your name");
    event.preventDefault();
  }
}

现在，在每次成功提交时，我希望在顶部滑动一条成功消息，停留 2 秒，然后淡出。

我试过了，但是，它在页面重新加载后不会保留。

else{
     $('.success_message').fadeIn(1500);   
  }

这在纯 jQuery 中可能吗？

另外，我不是在寻找重新加载页面的方法。提交表单后，页面会自动重新加载。

Answer 1

提交表单后，在 localStorage 中设置一个值，指示成功消息应淡入:

$('form').on('submit', function(event) {
  if ($('#input').val() == 0){
    alert("Please insert your name");
    event.preventDefault();
  }
  localStorage.fadeInSuccessMessage = "1"
});

然后检查该值是否存在于 localStorage 中。如果是，淡入消息并从 localStorage 中删除值:

if ("fadeInSuccessMessage" in localStorage) {
  $('.success_message').fadeIn(1500);
  delete localStorage.fadeInSuccessMessage;
}