如何使用 localStorage 和“可见”属性隐藏 aframe 对象？答案

【问题标题】：How do I hide an aframe object using localStorage and the 'visible' attribute?如何使用 localStorage 和“可见”属性隐藏 aframe 对象？
【发布时间】：2018-11-21 08:46:22
【问题描述】：

我想通过操作“可见”属性来隐藏一个使用 localStorage 调用到 HTML 代码上的 aframe 对象。

我浏览过其他文章，例如How can I hide an element with A-Frame?

但它对我不起作用。

以下是我的代码：

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

我的 carVisibility localStorage 设置为“false”和“true”，具体取决于用户的输入。如果我用“visible = false;”替换 localStorage 部分它完美地工作。但是，一旦我添加了 localStorage 部分，它似乎就无法连接和工作。很明显这是一个语法错误，但是我不确定它有什么问题？

【问题讨论】：

您不能只将 JavaScript 代码添加到 HTML 属性中。最佳答案是 Piotr 的组件。

标签： html storage hide aframe

【解决方案1】：

visible: ... 需要 true 或 false 值。你不能在那里放置 js 代码，比如visible="1 === 2"。示例here。

你应该把你的逻辑放在一个框架组件中：

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

并像这样使用它

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

工作示例here。将localStorage 设置为true 或false，启动并重新启动小提琴（以确保已设置本地存储）。

【讨论】：

【解决方案2】：

你确定 value ="localStorage............" 没有被当作字符串处理吗？

【讨论】：

【解决方案3】：

试试这个，

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

【讨论】：

赞成 Piotr 的回答，因为这需要 jQuery，并且不建议在组件之外运行 A-Frame 代码。