I have a research project which is focusing on understanding user's curiosity and connecting to Free WIFI including remote areas where internet is poor here.
To do this, we developed simple webpages with the first as a Visitor's form where we need a user/visitor to enter their data and let it be retrieved, saved or viewed later as user logs. We want to do this by simply having a Router and a Flash disk where the webfiles and data storing system will be...No server!
Is this very possible with Javascript, xml and or any other languages anyone has ever done this? That is except Javascript's LocalStorage which in this say, the user will be the one to have his/her own data.
This is an unusual request really. I agree a relational DB would be the best choice. Of course you can just save to text file (xml or not) and later use that file in Excel or so. That would be my choice.
You can probably store data with LocalStorage, and allow user to save data by exporting a .JSON or .CSV or something like that.
You can give the user a file to download by doing a window.open() on a Data URI containing the text of the JSON or CSV:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Related
I need some advice.
I'm looking for a way to work with a huge amount of data (800+mb) in the browser. This data should not be persistent. Users upload a csv file which they play with (filter) in the browser before doing anything with it. The columnnames in those csv files can vary wildly.
I was wondering what method to use here. Storing the data in memory in JavaScript variables does not work, as it crashes the page. I've been looking at indexedDB, which gives me the opportunity to keep the data in a database and even gives me filtering options. However this system is actually designed to store persistent data for offline use.
Preferably I would like to delete the database when loading a new file, create a new database with it's own objectstore and fill it with new data. But I found that the database is not deleted as long as I don't refresh the page and I cannot change it.
My questions: is using indexedDB a viable approach for this specific case? If yes, does anyone any pointers how to use it in this case? Are there other possibilities that I have overlooked?
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 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
As part of my college dissertation I am trying to test out how usable several different types of number entry keyboard interfaces are. To do this I need to record each key press my participants make and the timings of each key press. It is not enough just to record what they submit on a form as I need to monitor how many errors they see and correct also. I am hoping to somehow write this information to a .csv/spreadsheet to analyse after the experiments.
My supervisor suggested creating a webpage and using javascript for this but unfortunately I am a total beginner. My knowledge is limited to HTML. Could somebody please help me or suggest a place where I could find more information on this subject? I have been searching the web for the last couple of days with very little luck. Essentially I want to do something like in this example http://javascript.info/tutorial/keyboard-events#test-stand-test-stand except to write it to an external file on my computer and with the inclusion of timings for the key presses.
Many thanks,
A desperate student.
You cannot write JavaScript directly to a file. You could instead send the data to the server to save a file in the .csv format to a specified location. Alternatively you could output the data in a format which copies easily into excel.
I suggest setting up a Node.js server and using jQuery+AJAX to send the data to your server via POST request then saving a .csv file on the server.