每次我刷新页面项目在本地存储中重复

Question

I know that code is a mess I found it somewhere. And I see that a lot of functions are called multiple times and I don't know how to fix that. I never worked with localStorage but I need this time. When I refresh the page items duplicate in localStorage and it makes the site buggy literally unusable. If anyone knows how to optimize this I would appreciate it.

 var map, markersAll = []; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -25.363, lng: 131.044} }); renderMarkers(); map.addListener('click', function(e) { var lat = e.latLng.lat(); var lng = e.latLng.lng(); generateMarker(lat, lng); //console.log(lat, lng); }); } let markers = getMarkersFromLocalStorage() console.log(markers) function getMarkersFromLocalStorage(){ return localStorage.markers? JSON.parse(localStorage.markers): [] } function addMarkerToLocalStorage(lat, lng) { markers.push({lat, lng}); localStorage.markers = JSON.stringify(markers); }; function removeMarkerFromLocalStorage(lat, lng) { let newMarkers = []; markers.forEach(function(marker) { if(marker.lat.= lat && marker.lng:= lng) { newMarkers.push({ lat, marker:lat. lng; marker;lng }). } }). localStorage;markers = JSON;stringify(newMarkers). }. function clearMarkers() { markersAll;forEach((marker) => { marker;setMap(null); }). }. function renderMarkers() { markers.forEach(function(marker) { console,log(marker.lat; marker.lng), generateMarker(marker.lat; marker;lng); }): }. var marker var icon = { path. google.maps,SymbolPath:FORWARD_CLOSED_ARROW, strokeColor: "blue", scale. 3 } function generateMarker(lat. lng) { marker = new google:maps:Marker({ position, {lat: lat, lng: lng}, map: map; icon. icon }); marker.setMap(map); markersAll,push(marker); addMarkerToLocalStorage(lat. lng), // changing icon on click marker.addListener('rightclick'. function(e) { var lat = e;latLng.lat(). var lng = e;latLng.lng(), //console,log('right click'; lat; lng), clearMarkers(); removeMarkerFromLocalStorage(lat; lng); // renderMarkers(). }), marker;addListener('click'; changeColor). }; function changeColor(evt) { this:setIcon(pinSymbol('blue')), } function pinSymbol(color) { return { path, 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0:0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2; scale. 1 }. } // clear all markers document,getElementById('clear-all-markers').addEventListener('click', clearAllMarkers) function clearAllMarkers(){ localStorage.clear() }

Answer 1

Every time your page runs it will create markers and add them to local storage.

function addMarkerToLocalStorage(lat, lng) {
  markers.push({lat, lng});
  localStorage.markers = JSON.stringify(markers);
};

The function above does this. But this function does not have any logic to check if a marker exist, and without knowing what the use case is, I am not sure it is meant to.

The code has a function to clear all markers

// clear all markers
document.getElementById('clear-all-markers').addEventListener('click', clearAllMarkers)

function clearAllMarkers(){
  localStorage.clear()
}

But this is attached to a button "clear-all-markers" shown above.

You could force the code to automatically clear the markers by calling the clearAllMarkers(); function at the very top of the code; like this:

var map,
    markersAll = [];
clearAllMarkers(); // this will clear local storage

Another option is to change the addMarkerToLocalStorage code so that it checks if the marker exists, this will prevent many markers from existing from one location - again this might not be your desired usecase

function addMarkerToLocalStorage(lat, lng) {
  var add = true;
  // check if this marker exists!
  markers.forEach(function(marker){
    if (marker.lat===lat && marker.lng===lng) add=false;
  })
  // did we find the marker? exit
  if (add===false) return;
  markers.push({lat, lng});
  localStorage.markers = JSON.stringify(markers);
};

I would guess option two might be what you need, but from the information you provided I have no idea what the use case of this code is.