如果localstorage变量为true,如何在javascript中隐藏元素

Question

我正试图在页面加载时隐藏视频,并在按下任何链接后显示视频

这是我目前的代码

var videoplayer = document.getElementById("videoplayerlayer");
var links       = document.getElementsByTagName("a");

if(localStorage !== 'undefined')
{
  console.log("localStorage exists")

  if(localStorage["vv"] == false)
  {
    videoplayer.style.display = "none";
    localStorage["vv"] = false;
  }
  else
  {
    for( i=0; i<links.length; i++ )
    {
      links[i].onclick = function()
      {
        localStorage["vv"] = true;
        videoplayer.style.display = "block";
        console.log(localStorage["vv"]);
      }
    }
  }
}
else
{
  localStorage["vv"] == false;
}

Answer 1

localStorage只持有字符串.localStorage["vv"] = false;存储字符串 "false",这不是假的.

通常我存储JSON并解析它.但是,这可能是过度杀戮,只是存储"Y"或"N"作为标志并检查:

var videoplayer = document.getElementById("videoplayerlayer");
var links       = document.getElementsByTagName("a");

if (typeof localStorage !== 'undefined')
//  ^^^^^^ Note 2
{
  console.log("localStorage exists")

  if(localStorage["vv"] == "N")
  {
    videoplayer.style.display = "none";
    // No need, it's already stored - localStorage["vv"] = false;
  }
  else
  {
    for( var i=0; i<links.length; i++ )
    //   ^^^^---- Note 1
    {
      links[i].onclick = function()
      {
        localStorage["vv"] = "Y";
        videoplayer.style.display = "block";
      }
    }
  }
}
/* You don't want this, it'll throw an error, since we know `localStorage` is falsy
else
{
  localStorage["vv"] == false;
}
*/

然而,没有什么逻辑合理设置localStorage["vv"]来"N"(这是那里的一个任务是在一个分支那里它已经在那里).你需要添加一些东西来设置它,除非你想默认隐藏视频播放器并且只在它localStorage["vv"]被显示时"Y"(或者如果本地存储不可访问).

例如,这会隐藏播放器并仅在标志"Y"处于加载状态或单击其中一个链接时显示:

var videoplayer = document.getElementById("videoplayerlayer");
var links       = document.getElementsByTagName("a");

if (typeof localStorage !== "undefined") {
    if (localStorage.vv !== "Y") {
        videoplayer.style.display = "none";
    }
    for (var i = 0; i < links.length; i++)
    {
      links[i].onclick = function()
      {
        localStorage["vv"] = "Y";
        videoplayer.style.display = "block";
      };
    }
}

注1:你的代码成了隐形全球恐怖的 牺牲品(这是我贫血的小博客上的一篇文章).一定要声明你的变量.请参阅"Note"上面的评论.

注意2:检查是否可以使用本地存储是不正确的.我已将其更新为您可能在上面所说的内容,但请参阅此处以获取您想要使用的更全面的检查.

注3:我建议使用现代事件处理而不是设置onclick.