求助，刷新页面后移动节点，localStorage对象变为null，复制我的代码可直接运行，感谢感谢

这也不能运行不是吧 2022-02-17 09:22:01

萌新求助，首次使用，添加节点，移动节点，都正常没问题。但是只要刷新页面后，再次移动节点，edges就变为null。求大神帮忙，为啥这个就变为null了，感谢感谢

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Tutorial Demo</title>
</head>
<body onload="load()">
  <button onclick="add()">添加节点，并存储在localStorage中</button>
  <div id="mountNode"></div>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
  <script>
    let count = 0;
    // 定义数据源
    let data = {
      // 点集
      nodes: [
        {
          id: 'node1',
          label: '交换机',
          x: 100,
          y: 200,
        },
      ],
      // 边集
      edges: [],
    };

    let graph;
    function init_g6() {
      // 创建 G6 图实例
      graph = new G6.Graph({
        container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
        width: 800,
        height: 500,
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
        },
        layout: {
          type: 'force', // 设置布局算法为 force
          linkDistance: 200, // 设置边长为 100
          preventOverlap: true, // 设置防止重叠
        },
      });
      graph.data(data);
      graph.render();
      // 给G6监听节点拖拽完成后的触发事件
      graph.on('node:dragend', (e) => {
        const model = e.item.get('model')
        for (var i = 0; i < data.nodes.length; i++) {
          if (data.nodes[i].id === model.id) {
            data.nodes[i].x = model.x
            data.nodes[i].y = model.y
          }
        } 
        // Object.assign({}, data)
        console.log(data)
        // 节点移动后，重新在localStorage中再存一次
        let cache = []
        let str = JSON.stringify(data, function (key, value) {
          if (typeof value === 'object' && value !== null) {
            if (cache.indexOf(value) !== -1) {
              return
            }
            cache.push(value)
          }
          return value
        })
        cache = null // 清空变量，便于垃圾回收机制回收
        window.localStorage.setItem('g6data', str)
      })
    };
    // 在页面载入时，读取localStorage的节点数据，有的话直接赋值给data
    function load() {
      // 挂载时，先判断是否存储data这个，没有的话就把交换机加进来。有的话直接从本地get并赋值
      if (window.localStorage.getItem('g6data') === null) {
        window.localStorage.setItem('g6data', JSON.stringify(data))
        console.log('load时没有，先设置在本地中')
      } else {
        data = JSON.parse(window.localStorage.getItem('g6data'))
        //let getNodeData = JSON.parse(localStorage.getItem('g6data'))
        //Object.assign(data.edges, getNodeData.edges)
        //Object.assign(data.nodes, getNodeData.nodes)
        //Object.assign({}, data)
        console.log('load时有，直接赋值',data)
      }
      console.log('load完毕，初始化g6')
      init_g6()// 赋值完成后，初始化G6
    };

    function add() {
      count += 1
      let modelNode = {
        id: count.toString(),
        x: 10,
        y: 10,
      }
      let modelEdge = {
        source: 'node1',
        target: count.toString(),
      }
      graph.addItem('node', modelNode)
      data.nodes.push(Object.assign({}, modelNode))
      graph.addItem('edge', modelEdge)
      data.edges.push(Object.assign({}, modelEdge))
      let cache = []
      let str = JSON.stringify(data, function (key, value) {
        if (typeof value === 'object' && value !== null) {
          if (cache.indexOf(value) !== -1) {
            return
          }
          cache.push(value)
        }
        return value
      })
      cache = null // 清空变量，便于垃圾回收机制回收
      window.localStorage.setItem('g6data', str)
      graph.layout()
    }
  </script>
</body>
</html>

...全文