Portable Javascript Database

Question

I'm looking to develop an application made up only of .HTML, .JS and .CSS files (maybe some media files also) which can be copied from one machine to another and run from the local file system via a browser.

All of that is fine.

I'm also looking for a database that can be accessed from Javascript and IMPORTANTLY can be copied from one machine to another along with the .HTML, .JS and .CSS files so that 2 users can have independent copies of the same solution. Synchronisation not needed.

Does anybody have experience of this kind of set up and advice on which direction to go?

A key requirement is that the database does not need installation permissions on the target machine. Almost as if it were simply a local text file that Javascript could manipulate directly.

My understanding is that Local Storage and/or IndexedDb are 'embedded' in the local browser so I could not copy that data to a new machine with the .HTML, .JS and .CSS files.

Check [lowdb](https://github.com/typicode/lowdb). Key-value database based on JSON files. — Jax-p, Oct 09 '19 at 16:11
flat files or just dumping json to files works quite well, up to several megabytes of data. — dandavis, Oct 09 '19 at 16:12
You can use local storage/IDB to store the data, and when you want to copy it, just create a Blob with the contents you want to copy, get the data URL of it, assign that to a link, and call the link's `click()` method. That will download the contents to a file which can be loaded in and read back for import on another machine. — IceMetalPunk, Oct 09 '19 at 16:12
Interesting question. I think you can store a json file somewhere on internet and use that as a simple db — duc mai, Oct 09 '19 at 16:12
don't forget about `JSON.stringify(localStorage)`; easy exports/imports of tools that work on top of localStorage — dandavis, Oct 09 '19 at 16:13
@NeilW you can't access db/json file from browser environment (client) — Sudhakar Ramasamy, Oct 09 '19 at 16:16
"My understanding is that Local Storage and/or IndexedDb are 'embedded' in the local browser so I could not copy that data to a new machine"...you've somewhat contradicted yourself here. You said you didn't need to copy the data, only the structure (if no synchronisation is needed then evidently the data is not required). Since localstorage doesn't have an inherent structure, anything you save will have its structure defined by the JavaScript code you write....problem solved. — ADyson, Oct 09 '19 at 16:25
(if you need some "default" data to be there when you first run it, then just have a JS routine which checks whether the localstorage is empty or not and writes the initial data if it needs to.) Obviously the only limitation of localstorage is that the user must use the DB on the specific browser on the specific device. If they really need to move it again you could write a "export" routine which will generate a JSON file for them to download. — ADyson, Oct 09 '19 at 16:27
TBH though if you want a HTML/JS based client-side app with no server involvement you might be better off looking at something like [electron](https://electronjs.org/) which is more suited to this concept, rather than trying to mis-use a browser environment. — ADyson, Oct 09 '19 at 16:28

score 1 · Answer 1 · answered Oct 09 '19 at 16:18

The problem with files is that most browsers block file access directly from an html page(unless run with a local server). Even in that case, you cannot write back changes to the file from the browser.

A better/scalable approach would be to use indexedDB / LocalStorage or any of the other packages that basically wrap the above two (unless you are making a nodejs application)

You create an export/import functionality that creates a say, .txt file and downloads it locally; which can then be imported back to browser from another machine.

This answer might help. How to create a file in memory for user to download, but not through server?

score 0 · Answer 2 · answered Oct 09 '19 at 16:17

NeDB is my favorite light weight javascript Database. NeDB is an embedded document DBMS written in JavaScript. It supports Node.js, nw.js, Electron, and web browser environments. It is designed to be partially compatible with MongoDB's JSON-based query API. To get started kindly follow this link https://dbdb.io/db/nedblink

IceMetalPunk · Answer 3 · 2019-10-10T14:54:03.800

0

To elaborate on my comment about making a Blob and downloading it:

const downloader = document.createElement('a');
document.body.append(downloader);
downloader.download = 'exported_file.json';
function exportDB() {
    const storedData = JSON.stringify(localStorage);
    const blob = new Blob([storedData], {type: 'text/json'});
    const url = URL.createObjectURL(blob);
    downloader.href = url;
    downloader.click();
}

Importing would require a file input, <input type='file'> and a function that uses a FileReader to read and store the data. Something like this, if the input has an id of importFile:

function importDB() {
    const file = document.getElementById('importFile').files[0];
    const reader = new FileReader();
    reader.onload = function() {
        const json = JSON.parse(reader.result);
        Object.assign(localStorage, json);
    };
    reader.readAsText(file);
}

EDIT Updated based on @dandavis's suggestion to use Object.assign instead of a loop for importing.

edited Oct 10 '19 at 14:54

answered Oct 09 '19 at 16:28

IceMetalPunk

5,476
3
19
26

1

`Object.assign(localStorage, {a:1})` is simpler/faster than looping. also, you don't need to append the link to body (or anywhere) to fire the download on it via click() – dandavis Oct 09 '19 at 19:25
@dandavis You're right about Object.assign. But for the link, certain browsers won't actually trigger the download unless the link is in the DOM. (I've tested on Firefox and it just does nothing unless it's appended first.) – IceMetalPunk Oct 10 '19 at 14:23
ahh firefox, the new IE8. good to know, thanks. – dandavis Oct 10 '19 at 14:52

Portable Javascript Database

3 Answers3