本地存储具有空值

Question

＆＃13;

＆＃13;

(function() {

  function getPoint(event) {
    // account for offset.
    // See: http://www.jacklmoore.com/notes/mouse-position/
    var target = event.target || event.srcElement;
    var rect = target.getBoundingClientRect();
    var point = {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    }
    return point;
  }

  function getOpenPolygonIndex(polygons) {
    return polygons.reduce(function(previous, current, index) {
      if (current.open) {
        return index;
      }
    }, undefined);
  }

  function getOpenPolygon(polygons) {
    return polygons[getOpenPolygonIndex(polygons)];
  }

  var polygonPrototype = {
    addPoint: function(point) {
      return this.points.push(point);
    },
    close: function() {
      this.open = false;
    }
  };

  function polygonFactory(point) {
    return Object.create(polygonPrototype, {
      open: {
        value: true,
        writable: true
      },
      point: {
        value: point
      },
      points: {
        value: [],
      }
    });
  }

  var pointPrototype = {
    isMouseOver: function(point) {
      if (point.x > this.min.x && point.x < this.max.x) {
        return (point.y > this.min.y && point.y < this.max.y);
      }
    }
  }

  function pointFactory(point) {
    var range = 10;
    var min = {
      x: point.x - range,
      y: point.y - range
    };
    var max = {
      x: point.x + range,
      y: point.y + range
    };
    return Object.create(pointPrototype, {
      x: {
        value: point.x
      },
      y: {
        value: point.y
      },
      min: {
        value: min
      },
      max: {
        value: max
      }
    });
  }

  function getElementById(id) {
    return document.getElementById(id);
  }

  function getCanvas() {
    return getElementById('canvas')
  }
  
  function initCanvas(canvas, context, config, polygons) {
    canvas.width = config.width;
    canvas.height = config.height;

    canvas.addEventListener('mousemove', function(event) {
      if (getOpenPolygon(polygons) && getOpenPolygon(polygons).point.isMouseOver(getPoint(event))) {
        canvas.style.cursor = 'crosshair';
      } else {
        canvas.style.cursor = 'default';
      }
    });

    canvas.addEventListener('click', function(event) {
      var polygon = getOpenPolygon(polygons);
      
      if (polygon === undefined) {
        // create first point of a new polygon.
        polygon = polygons[polygons.push(polygonFactory(pointFactory(getPoint(event)))) - 1];
        context.beginPath();
        context.fillRect(polygon.point.x, polygon.point.y, 1, 1);
        context.moveTo(polygon.point.x, polygon.point.y);
      } else if (polygon.point.isMouseOver(getPoint(event))) {
        // close the polygon, connect last point to the first point.
        context.closePath();
        context.stroke();
        polygon.close();
      } else {
        // create a new point on the open polygon.
        var point = polygon.points[polygon.addPoint(pointFactory(getPoint(event))) - 1];
        context.lineTo(point.x, point.y);
        context.stroke();
      }

      if (polygon.open === false) {
        console.log(polygons)
        localStorage.setItem("polygons",JSON.stringify(polygons));
      };

    });
  }

  function getContext() {
    return getCanvas().getContext('2d');
  }

  function initContext(context, config) {
    context.fillStyle = config.fillStyle;
    context.strokeStyle = config.strokeStyle;
  }

  function getReset() {
    return getElementById('reset');
  }

  function initReset(reset, canvas, context, polygons) {
    reset.addEventListener('click', function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      polygons.length = 0;
    })
  }
  
  document.addEventListener('DOMContentLoaded', function() {

    var polygons = [];

    var config = {
      canvas: {
        width: 500,
        height: 300
      },
      context: {
        fillstyle: 'red',
        strokeStyle: 'red',
        lineWidth:10
      }
    };

    var canvas = getCanvas();
    var context = getContext();
    var reset = getReset();

    initCanvas(canvas, context, config.canvas, polygons);

    initContext(context, config.context);

    initReset(reset, canvas, context, polygons);

  });

})();

＆＃13;

＆＃13;

＆＃13;

这是我在脚本标签中使用的js文件，并在index.html（react js）中添加以在画布上绘制多边形。 我有控制台＆＃34;多边形＆＃34;它工作正常但是当我在本地存储中设置它时，它显示的值如提供的图像中所示为null。