How to store new elements?

Question

I have a function that creating new variable by clicking. I need to store this variables and display after reloading the page.

maptilersdk.config.apiKey = 'FeLE2yBSiMMi7tgevphq';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element in which the SDK will render the map
      style: maptilersdk.MapStyle.STREETS,
      center: [30.5, 50.5], // starting position [lng, lat]
      zoom: 14, // starting zoom
    });
    const marker = new maptilersdk.Marker({
      color: '#000',
      draggable: true,
    })
      .setLngLat([30.5, 50.5])
      .addTo(map);
    **map.on('click', function (e) {
      const marker = new maptilersdk.Marker({
        color: '#000',
        draggable: true,
      })
        .setLngLat([e.lngLat.lng, e.lngLat.lat])
        .addTo(map);
    });**

I have tried to create an array and push elements inside. It doesn't work. And the major question is how to display this data after reloading the page.

Answer 1

The question of how to display data after reload is only solvable by storing the data somewhere either on the server and adding it to the next request or somewhere on the local machine.

Check out the local storage API.

You can set key and value pairs like so localStorage.setItem("myCat", "Tom"); and retrieve those on the next request like so const cat = localStorage.getItem("myCat");

localStorage API

Answer 2

JavaScript doesn't save data between sessions by default. It's a basis of JS. You have to store it in Cookies / Session Storage / Local Storage etc. on your choise. In your case better way is to save not a created variable but the date you are using to init connections(and other settings)