How can data be saved in an offline website?

Question

I would like to have an offline website -- HTML/JavaScript/CSS in some format (a folder, zip, SingleFile, or MHTML) -- that has a form that a user A can enter data into, and then have that data saved to the website somehow so that it can be transferred to another user B, who can open it and see the data. The idea is to mimic functionality like you find in an form-fillable PDF.

Data can easily be saved using localStorage but then it resides in user A's browser. As I understand it a website cannot save files directly to the harddrive. So how could this be accomplished? The only thing I could think of is to have the form "export" the data to some JSON that user A would have to copy, paste into an editor, and save to the appropriate location on the local website. But perhaps there is a better solution?

The originating idea: http://stackoverflow.com/questions/29778763/what-technical-things-can-be-done-with-pdf-but-not-an-html-website — Luke, Apr 22 '15 at 00:37

score 1 · Answer 1 · answered Apr 22 '15 at 00:39

Your methodology for creating the JSON seems good, and you can have a button that saves the JSON to a file. Something along the lines of;

jsobj = jsobjectwithyourdata
var json = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsobj));
$('<a href="data:' + json + '" download="export.json">Download</a>').appendTo('#somewhere');

Then all your users have to do is click the link.

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

Browsers are designed to prevent websites from modifying the users computer in any way for security purposes. You'll have a hard time saving anything from a browser besides in local storage.

However, there are applications out there to help you code an html/js/css desktop application such as http://appjs.com/. This would let you package something up to accomplish just what you're looking for.

I would suggest the following comment thread for a similar discussion of desktop apps using html/css/js: How to develop Desktop Apps using HTML/CSS/JavaScript?

edited May 23 '17 at 11:43

Community

1
1

answered Apr 22 '15 at 00:42

joeyfb

3,044
3
19
25

Many browsers also support [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) and the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) for offline file storage. – Anderson Green Apr 12 '22 at 17:47

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

One other option is to store user A's data in localStorage, then regularly check if there is an internet connection.

If a connection to your server can be made, sync all the data in user A's localStorage with your server, and then give user B access to it.

Edit

If browser compatibility is not very important, here is a "save as/open" solution that would work completely offline. Only tested in Chrome, based on this post

window.upload = function(files) {
    var f = files[0];
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.getElementById("result").innerHTML = contents;
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
}

window.download = function(filename) {
    var data = {
        foo: 1,
        bar: 2
    }
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)));
    pom.setAttribute('download', filename);
    pom.style.display = 'none';
    document.body.appendChild(pom);
    pom.click();
    document.body.removeChild(pom);
    return false;
}

<strong>Save data </strong>
<button onclick="download('download.txt')">Download data</button>
<br />
<strong>Read from file </strong>      
<input type="file" id="input" onchange="upload(this.files)">
<p>Result:</p>
<div id="result"></div>

Ideally I'd like a solution that does not require a server (or even an internet connection), but I do think that this might be on of the best solutions w/r/t UX. — Luke, Apr 22 '15 at 00:44

How can data be saved in an offline website?

3 Answers3

Edit