javascript save/load image + text data from client side

Question

I want users of my page to be able to save and load data (single file) which contains images and numerical values.

I've found how to save image

saveImgAs = function (img, fileName) {
    a = document.createElement('a');
    a.setAttribute('href', img.src);
    a.setAttribute("download", fileName);
    a.click();
}

and text files

saveTextAsFile = function (textToWrite, fileNameToSaveAs) {
    var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }
    downloadLink.click();
};

destroyClickedElement = function(event) {
    document.body.removeChild(event.target);
};

but I don't know how to merge them to one file and how to load that structure back..
Any ideas?

score 0 · Answer 1 · answered Jan 09 '14 at 10:02

0

You may be looking for Web Storage, a new feature of HTML5 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage. It will ultimately make your entire process easier and require fewer hack-like solutions.

answered Jan 09 '14 at 10:02

Zeal

474
3
4

score 0 · Answer 2 · answered Jun 25 '14 at 14:41

0

Like Zeal said, just use the Web-Storage of HTML5 ( aka "local storage" ). Nowadays almost all browsers support it. Here a short example:

// Check if it is supported in your browser
function supports_html5_storage()
{
      try
      {
        return 'localStorage' in window && window['localStorage'] !== null;
      }
      catch (e)
      {
        return false;
      }
}

//make use of it:
if( supports_html5_storage() == true )
{
   localStorage.setItem("myItem", "myData");
   var myDataString = localStorage.getItem("myItem");
   alert(myDataString);
}

answered Jun 25 '14 at 14:41

Alex

1,602
20
33

How could be this an answer?! The output must be a single file what the user can open, not a local storage entity, what the average user doesn't have a clue. Or if I miss something can you elaboate it? – Skalár Wag May 23 '15 at 07:51
It seems to be no requirement that the users can open the single file by their own. Op just asks for a way to load/save from/to a single file. Actually the DB-entity even is a single file. – Alex May 24 '15 at 15:31

score 0 · Answer 3 · edited May 23 '17 at 11:58

I use the WebStorage API and localStorage to save and load the game saves of my js games, so I don't know much about saving and loading a file, but this should help you save it as one file, which seems to be the crux of this question.

Convert your image to base64 string.

How to convert image into base64 string using javascript

Save your image string and numerical values to a single object.

Use JSON.stringify() method to convert the object to a string.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Save the JSONstring as a file.

Writing a json object to a text file in javascript

When you load the file use JSON.parse() to restore it to an object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse