使用localStorage实现popin的显示一次

有时我们需要在网站中显示一些弹窗，但是不希望每次刷新页面都会弹出。这时我们可以使用localStorage来记录该弹窗是否已经显示过，只在第一次访问时显示。

实现方式

首先，我们需要检测localStorage是否支持。

function isLocalStorageSupported() {
  try {
    var testKey = '__test__';
    localStorage.setItem(testKey, testKey);
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

然后，在需要弹出弹窗的地方加入判断逻辑，如果该弹窗已经显示过，则不再弹出；如果没有显示过，则弹出，并将该信息记录在localStorage中。

function popin() {
  // 检查localStorage是否支持
  if (!isLocalStorageSupported()) {
    return;
  }

  // 检查该弹窗是否已经显示过
  if (localStorage.getItem('hasPopinShown') === 'true') {
    return;
  }

  // 弹出弹窗
  // ...

  // 将该信息记录在localStorage中
  localStorage.setItem('hasPopinShown', 'true');
}

完整代码

function isLocalStorageSupported() {
  try {
    var testKey = '__test__';
    localStorage.setItem(testKey, testKey);
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

function popin() {
  // 检查localStorage是否支持
  if (!isLocalStorageSupported()) {
    return;
  }

  // 检查该弹窗是否已经显示过
  if (localStorage.getItem('hasPopinShown') === 'true') {
    return;
  }

  // 弹出弹窗
  // ...

  // 将该信息记录在localStorage中
  localStorage.setItem('hasPopinShown', 'true');
}

总结

使用localStorage来判断弹窗是否已经显示过是一种方便实用的方法，可以有效地减少用户对重复弹窗的烦恼。需要注意的是，在用户清除了浏览器缓存或者在隐私模式下访问时，localStorage中的信息会被清空，需要再次弹出弹窗。