0

I would like to hide an aframe object using localStorage that is being called onto the HTML code, by manipulating the "visible" attribute.

I've looked through other articles like How can I hide an element with A-Frame?

but it does not work for me.

The following is my code:

  <a-obj-model
  visible = "localStorage.getItem('carVisibility')";
   id="carA"  src="#car_obj" mtl="#car_mtl" position="1 1 7" rotation="0 0 0"></a-obj-model>

My carVisibility localStorage is set as "false" and "true", depending on user's input. If I replace the localStorage part with "visible = false;" it works perfectly. However, once I add the localStorage portion, it doesn't seem to connect and work. It's clear it's a syntax error, however, I'm not sure what's wrong with it?

Jim Ng
  • 91
  • 1
  • 4
  • 15
  • You can't just add JavaScript code into HTML attributes. Best answer is Piotr's with the component. – ngokevin Nov 21 '18 at 11:42

3 Answers3

1

The visible: ... expects a true or false value. You can't place there js code, like visible="1 === 2". Example here.

You should place your logic in an aframe component:

AFRAME.registerComponent("foo", {
  init: function() {
    // provided carVisibility is true or false
    this.el.setAttribute("visible", localStorage.getItem('carVisibility'))
  }
}

and use it like this

<a-entity foo></a-entity>

Working example here. Set the localStorage to true or false, start and restart the fiddle (to make sure the local storage is set).

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
0

Are you sure value ="localStorage............" Is not being treated as string?

Subrat Gupta
  • 21
  • 1
  • 2
0

Try this, 

$(document).ready(function(){
    $('#carA').attr('visible', localStorage.getItem('carVisibility'));
});
Subrat Gupta
  • 21
  • 1
  • 2
  • Favor Piotr's answer as this requires jQuery, and running A-Frame code outside of components is not recommended. – ngokevin Nov 21 '18 at 11:42