Javascript 单击按钮存储X和Y坐标后，如何存储X和Y坐标

我试图在点击画布后存储x和y坐标，我可以设置一个标记位置，我可以在该位置显示x和y坐标以及标记的图片，但现在我想存储这些坐标，以便在重新加载web浏览器时，标记位置仍然在您第一次放置它的位置

完整代码已关闭

var context = (this.canvas.nativeElement as HTMLCanvasElement).getContext("2d")

//Map sprite
var mapSprite = new Image();
mapSprite.src = "http://antyradar.info/wp-content/uploads/commercial-tumilty-design-commercial-floor-plans.jpg";

var Marker = function () {
this.Sprite = new Image();
this.Sprite.src = "https://www.lasvegas-waterdelivery.com/wp-content/uploads/2016/07/5gal-cropped.png"
this.Width = 12;
this.Height = 20;
this.XPos = 0;
this.YPos = 0;
}

  var Markers = new Array();
  var rect = (this.canvas.nativeElement as HTMLCanvasElement).getBoundingClientRect();

  var mouseClicked = function (mouse) {
  // Get current mouse coords
  var mouseXPos = (mouse.x - rect.left);
  var mouseYPos = (mouse.y - rect.top);



  console.log("x: " + mouseXPos);
  console.log("y: " + mouseYPos)
  console.log("Marker added");

  // Move the marker when placed to a better location
  var marker = new Marker();
  marker.XPos = mouseXPos - (marker.Width * 37.7);
  marker.YPos = mouseYPos - (marker.Height * 7);

  Markers.push(marker);

  for (var i = 0; i < Markers.length; i++) {
    if(i > 1){
      Markers.splice(marker);
    }
  }


  sessionStorage.setItem('Marker', JSON.stringify(marker));
  let store = sessionStorage.getItem('Marker');

  console.log(store);

  var remember = function(){
    return store;
  }
}

// Add mouse click event listener to canvas
/* (this.canvas.nativeElement as HTMLCanvasElement).addEventListener("mousedown", mouseClicked, false); */

var firstLoad = function () {
  context.font = "15px Georgia";
  context.textAlign = "center";
}

firstLoad();

var main = function () {
  draw();
};

var width = (this.canvas.nativeElement as HTMLCanvasElement).width
var height = (this.canvas.nativeElement as HTMLCanvasElement).height
var draw = function () {
  // Clear Canvas
  context.fillStyle = "#000";
  context.fillRect(0, 0, width, height);

  // Draw map
  // Sprite, X location, Y location, Image width, Image height
  // You can leave the image height and width off, if you do it will draw the image at default size
  context.drawImage(mapSprite, 0, 0, 700, 700);

  // Draw markers
  for (var i = 0; i < Markers.length; i++) {
    var tempMarker = Markers[i];
    // Draw marker
    context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);
  }
};

setInterval(main, (1000 / 10)); // Refresh 60 times a second

var context=（this.canvas.nativeElement作为htmlcanvaseelement.getContext（“2d”）
//地图精灵
var mapSprite=新图像（）；
mapSprite.src=”http://antyradar.info/wp-content/uploads/commercial-tumilty-design-commercial-floor-plans.jpg";
变量标记=函数（）{
this.Sprite=新图像（）；
this.Sprite.src=”https://www.lasvegas-waterdelivery.com/wp-content/uploads/2016/07/5gal-cropped.png"
这个。宽度=12；
这个。高度=20；
这个.XPos=0；
这1.YPos=0；
}
var Markers=新数组（）；
var rect=（this.canvas.nativeElement作为HTMLCanvasElement）；
var mouseClicked=函数（鼠标）{
//获取当前鼠标坐标
var mouseXPos=（mouse.x-rect.left）；
var mouseYPos=（mouse.y-rect.top）；
console.log（“x:+mouseXPos”）；
console.log（“y:+mouseYPos）
控制台日志（“添加标记”）；
//将标记放置到更好的位置时移动标记
var marker=新标记（）；
marker.XPos=mouseXPos-（marker.Width*37.7）；
marker.YPos=mouseYPos-（marker.Height*7）；
标记器。推（标记器）；
对于（var i=0；i1）{
标记。拼接（标记）；
}
}
setItem（'Marker'，JSON.stringify（Marker））；
let store=sessionStorage.getItem（'Marker'）；
控制台日志（存储）；
var memory=function（）{
退货店；
}
}
//将鼠标单击事件侦听器添加到画布
/*（this.canvas.nativeElement作为HTMLCanvasElement）。添加了EventListener（“mousedown”，mouseClicked，false）*/
var firstLoad=函数（）{
context.font=“15px格鲁吉亚”；
context.textAlign=“中心”；
}
firstLoad（）；
var main=函数（）{
draw（）；
};
var width=（this.canvas.nativeElement作为HTMLCanvasElement）。宽度
变量高度=（this.canvas.nativeElement作为HTMLCanvasElement）。高度
var draw=函数（）{
//透明帆布
context.fillStyle=“#000”；
fillRect（0，0，宽度，高度）；
//绘制地图
//精灵，X位置，Y位置，图像宽度，图像高度
//您可以关闭图像的高度和宽度，如果这样做，将以默认大小绘制图像
drawImage（mapSprite，0,0700700）；
//画记号笔
对于（var i=0；i

}

您可以使用来存储坐标

sessionStorage.setItem('Marker', JSON.stringify(marker));

您可以使用来存储坐标

sessionStorage.setItem('Marker', JSON.stringify(marker));

---

如果这是爱奥尼亚3，也将信息存储在提供商中，保持每页/刷新时的一致性，或使用爱奥尼亚4的服务（-tutorial）。要在关闭和打开应用程序后保留信息，您可以使用爱奥尼亚文件插件或其他此类本机存储

如果这是爱奥尼亚3，也将信息存储在提供商中，保持每页/刷新时的一致性，或使用爱奥尼亚4的服务（-tutorial）。要在关闭和打开应用程序后保留信息，您可以使用爱奥尼亚文件插件或其他此类本机存储

会话存储可以工作，我可以得到坐标，但是如果我刷新，标记的位置会消失，你知道刷新后它如何保持标记在他的位置上吗？有很多方法可以实现这一点。在你的例子中，我需要更多关于Marker类以及如何管理渲染的详细信息。sessionStorage工作我可以获得坐标，但是如果我刷新，标记的位置会消失，你知道刷新后它如何将标记保留在其位置上吗？有很多方法可以实现这一点。在您的例子中，我需要有关Marker类以及如何管理渲染的更多详细信息。