I want to develop an web application that can be served without web server. I mean, via file:///... in a web browser. The application will use HTML5 and Javascript. Also , I would like to add a SQLite with the data to be presented in the application. The database will be static so a read-only access is enough. I don't want a HTML5 local storage solution because the SQLite database is already created and must be load from "server".
I don't find any solution. A pseudocode example may be the following one:
var db = load ("file:///path/to/my/database/file.sqlite");
db.execute ("SELECT * FROM DATABASE");
// Show items
load from the system files, I think this is not posible due to security reasons.
chek this online tool to manage local data storage at: http://wdbengine.sourceforge.net
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/
I want to execute queries against a local SQLite file, from JavaScript. How can this be done?
By local, I mean a .sqlite file on the user's computer. I do not need storage for an application, so suggestions about WebSQL are not helpful.
The use-case is, I have many local SQLite files that I use as a database for other applications. I am trying to build a Chrome Extension that lets me query the SQLite files so I can see data contents without having to use my SQLlite workbench app, which sucks.
An extension would not be able to do that. While you can "upload" a file to an extension, it would not retain access to the file on disk; it would be just a snapshot at the moment of an upload.
An app, however, can. With chrome.filesystem API, you can request read or read/write access to a file, and retain the resulting entry to query it again later without dialogs to the user.
Of course, it's up to your JS code to actually read the database. There is no API for that, you need to use a library.
I am developing a web application on asp.net. there are some pages which needs to be run in offline mode also for that i have make copy database to client system in a specific folder location now i want to make connection with SQLite and Html page using javascript.
Please give me a solution for that.
I am trying to build a web application to replace the functionality of an older desktop economics program. That program is essentially a calculation engine built on top of a Microsoft access database. The inputs and results are all stored on a series of tables. To offer compatibility to the legacy users, I want to have the ability for users to connect to their older, local access databases and upload them into the web app.
The approach I was contemplating was to have a page that allowed the user to select the database they wanted from their local machine and then have the schema and the data for each table sent to the web application. I don't really want to upload the whole file -- I just want to extract the relevant data.
I have done some research and I have looked into the HTML File API. One shortcoming is that the API does not expose the file path of a selected file so there does not seem to be a way to pass that to the connection string necessary to connect to the database using ODBC or ADO.
In summary my basic question is: How can I get the contents of a user's local database into a web application only using the browser?
You will have to upload the whole file to the server first. You can do your manipulations on the server to save only the relevant part and delete the rest... For security reasons Javascript is not able to read file's content from the local user's machine.
A suggestion - you can upload the file to server, read and print the relevant data as JSON or XML format, then delete the file and use all the data in your ajax response on the client's browser.
Introduction:
App must be able to run completely offline, store data locally and post it online via AJAX whenever there is an internet connection available - this may be some days later.
Question:
How to store data using Javascript?
Additional notes:
I don't want to use any server-side technology.
It must be secure like a database. I've read about cookies and html5 storage but none of them sound convincing.
If you are supporting modern browsers, you can make use of HTML5 Local Storage.
Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions.
Example
// Save data to a the current session's store
sessionStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + sessionStorage.getItem("username"));
// Get the text field that we're going to track
var field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if ( sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Check the contents of the text field every second
setInterval(function(){
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
}, 1000);
Browser Compatibility
Older Browsers
Use Polyfill.
Depending on how complex your data structures are that you want to store you could look at indexedDB. It's availability is still pretty bleeding edge but with a polyfil you can target the majority of modern desktop and mobile browsers.
The data stored is no more secure than any other client storage model since it's meant to be read with JavaScript.
The API itself is pretty complex to dive straight into using so you might want to look at wrapper APIs such as PouchDB which syncs with CouchDB or if you want something much simpler there's db.js.
You can use HTML5 Local Storage
Use polyfill for older browser
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage
Exactly what you want:
You can set up a CouchDB instance on IrisCouch to store your data. CouchDB is a database that acts as a webserver, so it can serve html pages based on its own data -- this use of the CouchDB (to serve pages) is commonly called CouchApp.
So you learn about CouchDB and write a HTML/Javascript/CouchDB-flavored app to serve your page. There are tools that facilitate this.
After that, you only need to send the data to your CouchDB database and it will be on your web page. You'll manage the client side stuff with PouchDB, a implementation of CouchDB that runs on your browser and saves your data locally, so you never lose it, and automatically updates your local data on the CouchDB server and vice-versa. It's the bleeding edge of the offline storages on the internet.
To ensure that the clients will not send bad data to the server, you can set up authentication (so to connect Pouch with Couch you will need to provide a password) or you can set up validation functions (so the server will only accept data storage requests that match certain parameters you define). These two approaches are well explained in the guide I linked before (here), but you will certainly run into all of this during your CouchDB learning process.
A lot of stuff, but a cool solution enough for the trouble. Also, this CouchDB thing is so easy I can bet you'll read and learn everything in one or two days.