0

I wrote code that allows me to create polylines on the fly by clicking on the container that is listening for clicks. My intention is to be able to save individual polylines by writing the points attribute to a file so that they can be recreated at a later time. To do this, my code has a loop that collects the points attribute, then passes it to array, which I change to a JSON object using the strigify function. I have read that this is a good practice for security reasons. Now I need some way to write this JSON object to a file on my computer and I want to do it on the client side, not the server side, I don't need it. If I manage to create these files, they will only be used by me and I will not send them or forward them anywhere. I want to be able to recreate the polylines that I once created. I want this to be on the client side, and I don't want to use localstorage as it doesn't seem to be the purpose of it. I want to use a JSON file that I want to create with my code. Each hint is important to me and I hope that I will be able to achieve my goal thanks to it.

function save() {
 var allPolylines = document.getElementsByTagName("polyline");
 for (var i = 0; i < allPolylines.length; i++) {
  arrayOfPolylines.push(allPolylines[i].getAttribute("points"));
 }
 var toSave = JSON.stringify(arrayOfPolylines);
 // what to do next with 'toSave' variable to write it to file saved on my computer
}
strastage
  • 5
  • 3
  • There is no such thing as a "JSON Object". When you call `JSON.stringify()` the output is a string. that's it. You can't directly save it to your hard drive, but you can download it: [Using HTML5/JavaScript to generate and save a file](https://stackoverflow.com/q/2897619/215552) – Heretic Monkey Jul 15 '21 at 19:23

1 Answers1

1

You can create a function that will generate anchor tag like this, then attach it to the page, and emulate a click.

It will allow you to download.

function download(filename, toSave) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(toSave));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// which will return something like this
<a href="data:application/octet-stream;charset=utf-16le;base64,"+toSave>Download File.</a>
Adh
  • 26
  • 2