Using localStorage to hide a div

Question

Using localStorage to hide a div

Navigation

#1 by (4 votes)
#2 by (1 votes)

1

Basically the problem I have is that I do not know how to hide the input and the button with localstorage , so when I refresh the page I do not show the input or the button, just the name.

HTML

<span id="label-user"></span><br>
<input type="text" id="inpuname" />
<input type="button" onclick="saveLogin()" value="Save" id="save"/>

JavaScript

function saveLogin(){
  var labelUser = localStorage.getItem("usuarioname");
  $("#label-user").text(labelUser);
  localStorage.setItem( "usuarioname", document.getElementById("inpuname").value );
  document.getElementById("label-user").innerHTML += document.getElementById("inpuname").value;
};
saveLogin()

jQuery(function(){
         jQuery('#save').click(function(){
               jQuery('#inpuname').hide();
               jQuery('#save').hide();
    });
});

Code link

javascript jquery local-storage

asked by Juan David 29.03.2017 в 11:52

source

2 answers

1

Maybe with a condition that checks if you have a name in localStorage?

...
var labelUser = localStorage.getItem("usuarioname")
if (labelUser) {
  jQuery('#inpuname').hide()
  jQuery('#save').hide()
}
...

answered by 29.03.2017 в 12:18

Dates conversion problem? Cut Name substr ()

score 4 · Accepted Answer

I have separated the function% co_of% into two. Leaving saveLogin() for what is the input saved in the saveLogin and the function, localStorage that fills the label with the value.

So when you load the page, you call only cargarLabel . If there is a value, the input and the button are filled and hidden. If there is no value to enter, the normal process is done.

You would not need the jQuery function that you had because now when you make save, you call cargarLabel that calls saveLogin and hides the components.

function saveLogin() {

  localStorage.setItem("usuarioname", document.getElementById("inpuname").value);
  cargarLabel();
};
cargarLabel();

function cargarLabel() {
  var labelUser = localStorage.getItem("usuarioname");
  if (labelUser) {

    //alert("ocultando");
    jQuery('#inpuname').hide();
    jQuery('#save').hide();
    $("#label-user").text(labelUser);
  }
  
}

<span id="label-user"></span>
<br>
<input type="text" id="inpuname" />
<input type="button" onclick="saveLogin()" value="Save" id="save" />

Demo:

link