javascript - 如何在javascript中本地保存树视图节点

Question

在下面的代码中，我有两个按钮，第一个孩子和最后一个孩子。

使用getdata()我添加了名为 building 和 floor 的树视图节点和子节点。现在在地板下，我可以先和最后添加孩子，但是在重新加载页面后它就不存在了。

重新加载页面后，我希望节点只显示这样。

我想在加载页面时在本地保存树视图节点

谁能帮帮我吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- You need to include these. -->
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>


<div class="col-xs-5">
      <div id="theTree">
      </div>
    </div>
    <div class="col-xs-7">
      <p>
        Building:
        <input class="form-control" id="theInput" value="My New Node">
      </p>
      <p>
        Floors:
        <button id="btnFirst" class="btn btn-default">First Child</button>
        <button id="btnLast" class="btn btn-default">Last Child</button>
      </p>
      <p>
        <button id="btnNoSel" class="btn btn-default">Remove Selection</button>
      </p>
    </div>
  </div>
  
  <script type="text/javascript">

onload = function() {

  // create the tree
  var theTree = new wijmo.nav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items'
  });
  theTree.selectedItem = theTree.itemsSource[0];

  // handle buttons
	document.getElementById('btnFirst').addEventListener('click', function () {
  	var newItem = { header: document.getElementById('theInput').value },
    		node = theTree.selectedNode;
		if (node) {
    		theTree.selectedNode = node.addChildNode(0, newItem);
		} else {
				theTree.selectedNode = theTree.addChildNode(0, newItem);
		}
	});
	document.getElementById('btnLast').addEventListener('click', function () {
  	var newItem = { header: document.getElementById('theInput').value },
    		node = theTree.selectedNode;
		if (node) {
    	var index = node.nodes ? node.nodes.length : 0;
    	theTree.selectedNode = node.addChildNode(index, newItem);
		} else {
    	var index = theTree.nodes ? theTree.nodes.length : 0;
    	theTree.selectedNode = theTree.addChildNode(index, newItem);
		}
	});
  document.getElementById('btnNoSel').addEventListener('click', function () {
  	theTree.selectedNode = null;
	});

  // create some data
  function getData() {
    return [
    	{ header: 'Building', items: [
      	{ header: 'Floors' },
        ]
    	},  
		];
  }
}

</script>

标签： javascript