CODEWITHSUNDEEP
htmlstoragehideaframe
Jim Ng
Jim Ng

Reputation: 101

How do I hide an aframe object using localStorage and the 'visible' attribute?

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?

Upvotes: 0

Views: 259

Answers (3)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

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).

Upvotes: 1

Subrat Gupta
Subrat Gupta

Reputation: 21

Try this, 

$(document).ready(function(){
    $('#carA').attr('visible', localStorage.getItem('carVisibility'));
});

Upvotes: 0

Subrat Gupta
Subrat Gupta

Reputation: 21

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

Upvotes: 0

Related Questions