将来自 Popup 的用户输入保存在本地存储中无法正常工作

Question

我有一个带有 pop 的标记，我能够在我的弹出窗口中保存来自表单的用户输入，但问题是它只有在我必须先单击地图上的某个地方时才会保存。这是我的代码...

L.marker([63.233627, 5.625])
.addTo(map)
.bindPopup('<form><select class="fodd" id="fodd-1"><option value="false">false</option><option 
value="true">true</option></select><button type="button" id="btnInsert">Save</button></form>')
.on('click', foddStatus);

L.marker([72.181804, 45])
.addTo(map)
.bindPopup('<form><select class="fodd" id="fodd-2"><option value="false">false</option><option 
value="true">true</option></select><button type="button" id="btnInsert">Save</button></form>')
.on('click', foddStatus);

function foddStatus(e) {
  var btnInsert = document.getElementById("btnInsert");

  btnInsert.onclick = function () {
// get user input when button is saved is clicked
  var foddValue = document.querySelector('.fodd').value;
  var foddLoc = document.querySelector('.fodd').id;
  var midFodd = ":";
  var var1 =  foddLoc + midFodd;
  var new_data = foddLoc + midFodd + foddValue;
  console.log(new_data);

  // if there is nothing saved on storage then save an empty array
    if (localStorage.getItem('foddstatus') == null){
      localStorage.setItem('foddstatus','[]');
    } 

  // get old data and slap it to the new data
  var old_data = JSON.parse(localStorage.getItem('foddstatus'));
  old_data.push(new_data);

  // save the old + new data to local storage
  localStorage.setItem('foddstatus', JSON.stringify(old_data));

// console.log(key);

  }
}

所以在我点击保存按钮的第一个标记上会发生什么，它会将值保存在本地存储中，然后当我转到第二个标记并点击保存按钮时，它实际上不会保存在本地贮存。我必须先点击地图上的其他地方才能将第二个标记的输入保存在我的本地存储中。

Answer 1

这是实现您的目标的另一种方法，但也许会有所帮助。

这只是一个测试，没有任何验证等，所以请注意！

我在弹出窗口中使用了简单的 div，在输入和按钮内。每个按钮都有它的 onclick 属性来调用 storeData 函数，如果输入不为空，它会设置 localStorage 键值。我使用输入 ID 作为键。

示例片段：

let ls = window.localStorage;

var map = L.map('map').setView([41, 21], 5);

var darkMap = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
  maxZoom: 20,
  attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);

var marker1 = L.marker([40, 10]).addTo(map);
var marker2 = L.marker([40, 30]).addTo(map);

marker1.bindPopup('<div><input class="ipt" id="ipt1" /><button onclick="storeData(this);" class="save">SAVE</button></div>');

marker2.bindPopup('<div><input class="ipt" id="ipt2" /><button onclick="storeData(this);" class="save">SAVE</button></div>');

function storeData(btn) {
  let ipt = btn.parentNode.querySelector('.ipt');
  if (ipt.value != '') {
    ls.setItem(ipt.id, ipt.value);
    let str = 'Data stored in localStorage with key: ' + ipt.id + ', value: ' + ls.getItem(ipt.id);
    alert(str);
  } else {
    console.log('Empty input!');
  }
}

还有一个working fiddle（请以非隐身模式打开）。

将来自 Popup 的用户输入保存在本地存储中无法正常工作

Saving user input from Popup in local storage not working properly

leaflet