Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>local state save</title>
  <meta name="description" content="local state save">    
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
​
</head>
<script type="text/javascript">  
  // added to https://github.com/Utopiah/aframe-persist-component
  AFRAME.registerSystem('persist', {
    schema: {
      savekey: {
        type: 'int',
        default: 13 // 13 = enter, cf https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Value_of_keyCode
      },
    },
    init: function () {
      this.entities = [];
      window.addEventListener("unload", saveAll);
  
      if (this.data.savekey) document.addEventListener("keydown", keyDown, false);
      var entities = this.entities;
      var savekey = this.data.savekey;
​
      function saveAll(){
          for (var i = 0; i < entities.length; i++) {
            document.getElementById(entities[i].id).components[entities[i].attrName].saveValue();
          }
      }
​
      function forgetAll(){
          for (var i = 0; i < entities.length; i++) {
            document.getElementById(entities[i].id).components[entities[i].attrName].forgetValue();
          }
      }
​
      function keyDown(e) {
        var keyCode = e.keyCode;
        if(keyCode==savekey) {
          console.log("Manual save");
          saveAll();
        }
      }
      
    },
    registerMe: function (el) {
      this.entities.push(el);
    }
  });
  
  
  AFRAME.registerComponent('persist', {
    multiple: true,
    // arguably could have been better to accept a list of attributes to save
    schema: {
      attribute: {
        type: 'string',
        default: 'position'
      },
      debug: {
        type: 'boolean',
        default: false
      }
    },
    
    init: function () {
      if (!this.el.id){
        console.log("error", this.attrName, "requires an element id on your entity");
        return;
      }
      this.data.storageName = this.attrName+'_'+this.el.id+'_'+this.data.attribute;
      this.loadValue();
      if (this.data.debug) console.log(this.data.storageName);
      this.system.registerMe({attrName: this.attrName, id: this.el.id})
    },
    
    loadValue: function(){
      let savedValue =  localStorage.getItem(this.data.storageName);
      if (savedValue){
        if (this.data.debug) console.log('Previous value of', this.data.attribute, 'for', savedValue,
                                         'saved from', this.data.storageName, ', using it');
        this.el.setAttribute(this.data.attribute, savedValue);
      }
    },
    
    saveValue: function(){
      let attributeValue = this.el.getAttribute(this.data.attribute);      
      if ((this.data.attribute == "position") || (this.data.attribute == "rotation"))
        localStorage.setItem(this.data.storageName, AFRAME.utils.coordinates.stringify(attributeValue));
      else
        localStorage.setItem(this.data.storageName, attributeValue);      
      
      if (this.data.debug) console.log(this.data.storageName, 'saved', this.data.attribute, 'of value', attributeValue);   
    },
    
    forgetValue: function(){
      if (this.data.debug) console.log(this.data.storageName, 'deleted'); 
        localStorage.removeItem(this.data.storageName);
    }
    
  });
  
</script>
​
​
<body>
  <a-scene>
    <a-camera id="testingid" persist="debug:true;"
      persist__rot="debug:true; attribute:rotation;"></a-camera>
    <a-box id="testingid2" visible="false"
      persist__pos="debug:true; attribute:position;"
      persist__vis="debug:true; attribute:visible;"
      persist__rot="debug:true; attribute:rotation;"></a-box>
    <!-- commented out to remove shader errors...
    <a-box scale="20 20 20" color="grey" scale="1" material="side:double"></a-box>
-->
    
  </a-scene>
</body>
  
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Utopiahpro
0viewers