I want to make some sort of website on a USB stick which opens in a browser. The HTML file should be able to read a (sql-)database in the same folder using javascript. It's a little application for me. These are my files:
USB stick:
-- start.html
-- database.sql
HTML5 offers "local storage" and it works perfectly. But with this method I can't access a local, already existing database on the stick. The browser creates a separate, emtpy database and saves it not on the stick. I don't need to write datasets.
Is there a different method to read databases? Thanks!
You can use sql.js, which is a SQLite converted to JavaScript. You'll have to provide your own import/export functions though and, naturally, you can't export to filesystem in JS, but since you only intend to read, that won't be a problem.
You are not going to be able to get the web browser to run a sql query. The best thing you could do is have it load data using ajax from the local file. It is not possible to save the updated data base to the local file system however.
You could have the javascript read comma separated data or the data could be stored in xml or json.
If you are wishing to save data however I believe a desktop application is needed
If it is just for reading, it is possible to just read and parse a file using javascript. But I wouldn't use an SQL file, but rather a file containing JSON instead. I don't think there are JavaScript libaries that can read SQL, and it won't be an easy job to write one.
Mind though, that even if you manage to find one, all of the file's contents will be read into memory, and that it is not possible to write the file.
Since you want a local running database application, I would very sincerely advise you not to use HTML and Javascript, but rather Java or any native language that can read the database and do some proper memory management. You may stick to HTML/JS for the GUI, if you want to, but you may find it just as easy to leave HTML out of it altogether.
What you want now, is very uncommon. Database applications tend to have a backend, and websites tend not to be run from a USB stick.
The problem is that local storage is local to the system the browser is running on because it's local to the browser not from where the files originated.
This means you'll have to deliver the data to the browser for it to store the data locally. Right now your data is located on your stick.
You have a couple of options:
1. Deliver the data to the browser to create your local storage database via javascript.
2. Use Rob W's answer and supply a portable browser (good idea Rob!)
I've made no assumptions how the data is stored in your .sql file. If it's actually SQL, you're out of luck. Localstorage is not a sql database.
Good Article on the basics of local storage in HTML5
http://diveintohtml5.info/storage.html
Related
I´m developing an small test app and I had a doubt about JSON in frontend.
I´m working with React and I´m using a JSON file as a small testing DB, saving only 1 user. The fact is that I want to write more users there and edit the JSON registers.
Is that possible without backend or AJAX?
**EDIT: **
I´m using localStorage for the actual logged in user and it´s moves, at the end need to save it´s data before I close session and localStorage loses.
AJAX is used for HTTP requests between a front-end (ex: ReactJS, VueJS) and a back-end (ex: NodeJS/Express, Python/Flask).
If you're using a JSON variable, the data will be deleted everytime the website refreshes. If you're using a JSON file, you can't access the file system from the browser for security reasons.
What I recommend to use is localStorage, which acts as a local database for front-end ONLY per browser (per user).
The most common usage is:
The setter:
localStorage.setItem('name', 'John')
The getter:
const name = localStorage.getItem('name');
console.log(name) // John
In React, you could set and update data as the following in this example I made:
DEMO https://stackblitz.com/edit/react-fctts3
Short answer, no. you can't write data directly to client's disk.
but there are workarounds.
one way is using common browsers storage options. such as localstorage:
localStorage.setItem(keyname, value)
read more here
another way if you need to move the data is to make the user download your file, and save it. when you need it again they can re-upload it to your front-end page. you can read up on this here.
of course there are other options like cookies and IndexedDB/WebSQL. but I think local storage can do just fine for your needs.
EDIT:
if you don't have problem with having an internet connection, there is also the awesom option of using google sheets as a database! using this tool:
https://sheety.co/
My question is about IndexedDB vs. WebSQL vs. SQLite. There is no need to explain that they are different, what I would like to know is:
Do those three "Database Solutions" allow for storing all its Data
to a file?
(and of course to do the reverse, initialize all its data given a backup file?)
.
Background
Since I already have done some research, which partly answers this question, allow me to provide this background info to the question:
SQLite
(yes it does allow storage and retrievel of the Database to and from a file)
I have already done some work with SQLite. For this I know that there it actually right away starts the database via a reference to the file. Backup is simple copying the file. Restoring is rewriting the file.
IndexedDB and WebSQL
??? Are to my understanding Database Solutions which "life their life in the Browser's Javascript land" and there we do not deal much with files. Here is part of where the question lies. If I wanted to export the data from either of the two solution to a flat file or lets say a one string variable representation, would that be possible?
This are some SO question I think that relate to it:
SO Question: Exporting WebSQL Data
SO Question: Import and Export Indexeddb data
which indicate that there is no easy toString() (Store Database) method and FromSting() in IndexedDB nor in WebSQL.
It indeed true (and affirmed in an answer here) and there is not easy backup and retrieval for those Database, this would be very sad, and I think a gap. Databases without backup function, really?!
At Present, there is no way to back up and restore Browser databases. The only way you can achieve this is by continuously syncing your back-end database with the browser database and thus keep track of changes in data generated on browser.
Old guy will do in old way, whether appropriate or not. How on earth, browser database need a backup. Data in the client is just cache copy of a slice of server data. There is no need back. If you think IndexedDB (or web sql database) data is durable, you will be glad to know, IndexedDB data belong to a temporary class of browser data, meaning that UA can delete data at their discretion without prompting to user or app.
If your app treat browser data more than cache copy, you are doing wrong.
I am constructing a standalone application that is comprised of HTML, CSS and JS files. The data that is being used by the application is being loaded from an XML file.
I, however, require the application to use a local database - something that would allow me to load, create and edit the data in this database using Javascript. Then package up the application and send it on (I am using webapp-xul-wrapper for this).
Could anybody give me some advice on how I could achieve this? The majority of solutions I have looked at use local storage or only keep the db table data for that particular session or require server side code.
To clarify, my application has a settings page that I would like to allow to edit my data and then keep that data persistent so that when the application is opened again the data is intact. Furthermore, if I was to send the application to someone else - that data would also be intact. Ideally my app would take its data from a physical file that could be passed around.
I hope this question makes sense!
Many thanks,
G.
I actually ended up using a packager called TideSDK (http://www.tidesdk.org/) which supports SQLLite out of the box and also seems to render my applications layout much clearer.
Many thanks!
I want to create a html5 page which embed a YouTube video,
and I will use firefox to open it.
While playing the video I want to record some information.
so basically I want to put some javascript codes on this page
and the javascript codes will create a log file, write to the log file from time to time.
My question is: is it possible to use html5 local storage for creating and writing files on client side?
are there any code example to create and write files on the client side using javascript and html5?
DOM storage has nothing to do with reading or writing files, but you can use it to accomplish what you're trying to do.
You can write some log information:
window.localStorage.setItem('myLog', 'someInformation');
and then you can read it later:
var storedInfo = window.localStorage.getItem('myLog'); // 'someInformation'
This will work as long as all pages interacting with the storage share the same host domain.
You can use local storage to store logs as a JSON object, but it's just a key-value store (an alternative to using a cookie) that is used to maintain a browser state or other client related information.. logs could be one of them.
Also, be aware that there are size limits.
There are plenty of wrappers for storing items in localstorage, jStorage, is my preference.
I have an online storage account that I`m using for my homepage. Basically I have just made an "index.html" and stored there . and no php , asp is possible .
So If I must create a message form on the homepage and store the message in a separate text file in JSON format ,can it be done using javascript ?
also I need to query the Text file whenver I want to display the messages using javascript .
So far , I tried TaffyDB but realised it doesn`t have a way to persist the data after session closes. or maybe I missed something?
Thanks!
Short answer. No.
The JavaScript is client side. So it can do all sorts of cool stuff on the persons computer that visits your site but unless you're running some server side code that takes the JSON encoded data and does something with it then you're out of luck.
There are many alternatives.
If you don't want to run your own server side code then you could use a separate service like Parse.com that does REST and has a comprehensive API.
A mobile website can access Parse data from Javascript.
A webserver can show data from Parse on a website.
You can upload large amounts of data that will later be consumed in a mobile app.
You can download recent data to run your own custom analytics.
Applications written in any programming language can interact with data on Parse.
You can export all of your data if you no longer want to use Parse.
You can try with jQuery/AJAX. To read:
$.get("path_to_file", null, function(fileData) {
alert(fileData);
/* Your code goes here */
}, "text");
But in order to write, I think the only way is with some server-side language (PHP, ASP, etc)
The short answer is no.
You need to have some server-side support to persist the data on that server. You can, however, use client-side javascript to relay the information to a server that DOES support reading and writing of the data of course.
Technically, node.js is javascript that does support file reading and writing - but I assume that's out of the question for your environment :)
One crazy way (just as a thought experiment) to implement persistent storage for your web application without server side support is to have the clients talk to each other through P2P. This is possible with Flash or some java applet..etc. So as long as one client is up (perhaps your own comupter!), you'll have some form of persistent storage. Your server/webpage simply serves up this embedded object which does the actual work.