how do I hide an element in javascript if localstorage variable is true

Question

I'm trying to hide a video when the page loads and keep the video shown after any link is pressed

this is my current code

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;
}

use `localStorage.getItem('vv')` and `localStorage.setItem('vv', "true")` — Tamil Selvan C, Apr 26 '17 at 10:33
Your logic is flawed. You check your localstorage entry for "false" and then set it to false. It will never become true. — devnull69, Apr 26 '17 at 10:34
@TamilSelvanC: Happy to help. `localStorage.getItem("foo")`, `localStorage["foo"]`, and `localStorage.foo` all access the `foo` item. :-) You had to use `setItem` and `getItem` with polyfills, but these days you don't need polyfills, pretty much everything has `localStorage`. — T.J. Crowder, Apr 26 '17 at 10:42

score 5 · Answer 1 · edited May 23 '17 at 12:02

localStorage only holds strings. localStorage["vv"] = false; stores the string "false", which is not falsy.

Normally I store JSON and parse it. That's probably overkill here, though, just store "Y" or "N" as the flag and check that:

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;
}
*/

However, nothing in the logic reasonably sets localStorage["vv"] to "N" (the one assignment that was there was in a branch where it's already there). You'll need to add something to set it, unless you want to default to hiding the video player and only show it when localStorage["vv"] is "Y" (or if local storage isn't accessible).

For instance, this hides the player and only shows it if the flag is "Y" on load or one of those links is clicked:

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";
      };
    }
}

Note 1: Your code was falling prey to The Horror of Implicit Globals (that's a post on my anemic little blog). Be sure to declare your variables. See the "Note" comment above.

Note 2: Your check for whether you can use local storage was incorrect. I've updated it to what you probably meant above, but see see here for more thorough checks you'll want to use.

Note 3: I would recommend using modern event handling rather than setting onclick.

T.J I've seen a lot of your awesome straight answers on a lot of posts before you're a life saver.. Thank you for the clarifications ! — Itachi Sama, Apr 26 '17 at 10:36

score 0 · Answer 2 · answered Apr 26 '17 at 11:12

Below code can help you

$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;
                       }
                  }

            });

how do I hide an element in javascript if localstorage variable is true

2 Answers2