1

So say you have a variable "data" data is then stored in a JSON format and converted to string using JSON.stringify(data). How would you then take this JSON data and save it as file x at location /pc/locationX ?

ob34
  • 13
  • 3
  • you can't control where its saved via the browser – Daniel A. White Apr 07 '19 at 01:55
  • 1
    Possible duplicate of [Create a file in memory for user to download, not through server](https://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server) – Daniel A. White Apr 07 '19 at 01:56
  • Javascript running in a browser cannot freely access the user's pc and folders, imagine the security issues! To store data, the html5 spec provides localStorage and sessionStorage. You can save up to 10mb in these storages and your javascript can write/load data at any time, even when a user closes the browser ans then later revisits your site. Check the tutorial here: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/ – user1884155 Apr 07 '19 at 02:15

2 Answers2

1

As mentioned by the other comments, you can't choose the download path target. However, you can use the following method to allow your users to download the JSON file. You might have probably guessed you can use the following method since you already know you can use JSON.stringify().

downloadJson(jsonObj, fileName){
  const data = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(jsonObj));
  const a = document.createElement('a');
  a.setAttribute('href', data);
  a.setAttribute('download', `${fileName}.json`);
  // You might need to uncomment the next line for Firefox
  // document.body.appendChild(a); 
  a.click();
  a.remove();
}
wentjun
  • 40,384
  • 10
  • 95
  • 107
  • You can also open another window using the URL so you don't have to use a `` – Reactgular Apr 07 '19 at 02:39
  • @cgTag Yes, you are absolutely right. I would have written something like `a.target = '_blank';`. – wentjun Apr 07 '19 at 02:47
  • However, you should test out the usage of `a.target = '_blank';` , as some browsers such as Chrome and Safari handle them differently. – wentjun Apr 07 '19 at 02:48
  • Fantastic! even better having a downloadable file, thank you very much! – ob34 Apr 07 '19 at 11:09
  • As comments above state using .target is the only way to make it work with firefox for example, using a.setAttribute('target', '_blank').... however it still does not work on internet edge, any suggestions? – ob34 Apr 07 '19 at 12:34
  • @ob34 to be honest, I am not sure about Edge. I think window.open(url, '_blank') works, but you should test it out on your machine first! – wentjun Apr 07 '19 at 14:54
  • Hmm.. If not, I was actually looking at this link while searching for some answers. Does any of them actually work? https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript – wentjun Apr 07 '19 at 14:54
0

localStorage.setItem('user', JSON.stringify(user)); Then to retrieve it from the store and convert to an object again:

var user = JSON.parse(localStorage.getItem('user')); If we need to delete all entries of the store we can simply do:

localStorage.clear();

Yash Tomar -Aeologic
  • 101
  • 5