Question

在Stackoverflow（我是JS中的0级新手）的一些帮助下，我实现了在满足条件时显示div gift 的情况：

if(total > 999 && total < 2999) {
$('#gift').show();

然后显示一个工具提示，该提示将在6秒后隐藏：

if(total > 999 && total < 2999) {
$('#gift').show();

$('.tooltip').show();
window.setTimeout(function(){
$('.tooltip').fadeOut('slow');
},6000);
}

好的，工作正常，但是我现在的兴趣是，该工具提示仅向用户显示一次，而我曾尝试为此用户使用 localStorage ，但这对我不起作用：

const showTooltip1=localStorage.getItem('tooltip');
  if(showTooltip1==='false'){
    $('.tooltip').hide();
}

// The section below is not of my interest in the script, but it may be

    /*
    $('#gift').on('click',function(){
    $('.tooltip').fadeOut('slow');
    localStorage.setItem('tooltip','false');
    });
    */

我在这里做错了什么...？

主脚本（每次单击）将触发工具提示的.show (); ...？

谢谢！

// -----------------------

完整脚本 ：（没有用于工具提示的本地存储）

$(document).ready(function(){
      function manageRegalo() {
        var totalStorage = Number(localStorage.getItem("total"));
        var total = Number($("#total").val().replace(".",""));
        if(totalStorage != null && total === 0) {
            total = totalStorage;
        }

        if(total > 999 && total < 2999) {
          $('#gift').show();
          $('.tooltip').show();
          window.setTimeout(function(){
          $('.tooltip').fadeOut('slow');
          },6000);
        }

        else{
          $('#gift').hide();
        }
      }

        $(document).on('click', function (event) {
          const target = event.target;
          if (target.matches('.comp-clone') || target.matches('.bbp')) {
            manageRegalo();
            localStorage.setItem('total', Number($("#total").val().replace(".","")));
          }
        });
        manageRegalo();
    });

Answer 1

您尚未指出您正在使用setItem写什么，因此我们无法知道应该返回什么getItem。

这里要遵循的逻辑是：如果getItem返回null，请显示工具提示，然后使用setItem将值放入localStorage，以便随后检查将阻止显示工具提示。

您需要按照以下方式修改代码：

if (localStorage.getItem('suppress_gift_tooltip') == null) {
      // Your unaltered tooltip code
      $('.tooltip').show();
      window.setTimeout(function(){
      $('.tooltip').fadeOut('slow');
      },6000);

      // Prevent subsequent display
      localStorage.setItem('suppress_gift_tooltip', 'true')
}

Answer 2

如果未分配该值，则localstorage值将为null。最好您可以使用null进行检查，然后将布尔值分配给以后使用。

if( !localStorage.getItem('toolTip') ) {
    // operation
    localStorage.setItem('toolTip',false);
}

如果在localStorage中不存在toolTip项，并且在localStorage中toolTip的值为false，则上述条件为真。

使用localStorage隐藏我的工具提示，但是在我的脚本中

2 个答案: