如果localstorage变量为真，我如何在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：您的代码已成为 The Horror of Implicit Globals 的牺牲品（这是我贫血的小博客上的帖子）。一定要声明你的变量。请参阅上面的"Note" 评论。

---

注意 2：您对是否可以使用本地存储的检查不正确。我已将其更新为您可能在上面的意思，但请参阅 see here 以获得您想要使用的更彻底的检查。

---

注意 3：我建议使用现代事件处理而不是设置 onclick。

Answer 2

下面的代码可以帮助你

$get('<%= AnchorId.ClientID %>').click(function(){
                  if(localStorage !== 'undefined'){
                         if(localStorage == false)
                          {
                            $get('<%= videoplayerlayer.ClientID %>').hide();
                            localStorage["vv"] = false;
                          }
                       else
                       {
                          $get('<%= videoplayerlayer.ClientID %>').show()
                          localStorage["vv"] = true;
                       }
                  }

            });