Features of openDatabase - javascript

I am looking at building an application that stores data locally using openDatabase.
I have a few questions about it.
Can the database been accessed any other way about from the website? I assume using something like firebug I could make queries against the database.But I am not sure if another website uses the same database name it will use or be able to update my website.
Are there any visual tools to be able to access the stored data?
Is the database stored against the logged in user or the computer? for example if a user logs into my website and the database is created and content inserted into the tables. If a different user logs into the computer and accesses the same site will a new database be created or will it reference the already created db?
Thank you!

The browser creates a database when window.openDatabase is called in JavaScript. Every database is stored by the browser on a per domain basis (i.e. if two domains use the same database name, the browser will store them separately). This also means that the database is visible to all the pages in that particular domain. Tools like Firebug are used for debugging client-side scripts and thus they can access the database, but then again so can any bookmarklet or external script.
Why would you need any visual tools to be able to access the stored data? The data is stored on the client-side and not on the server. Thus only the client will be able to modify it. Unless you are planning to make a local web page and store data for personal use, there's absolutely no need to make a front-end for the database.
The database is stored on a per user basis. Internally the browser stores the database in the current user's directory. For example, Opera on Windows it stores it in C:\Users\%USERNAME%\AppData\Local\Opera.

Related

Caching Firebase data for multiple collections - how can I know when anything has changed?

I'm using Firebase to allow users to save certain information about their logged-in profiles. In total I have 4 different collections, and all of which contain UID-matching documents.
When my site loads up, I need to immediately access data from all 4 collections for a given user's UID. This means that right now, whenever a user reloads my application they generate 4 get requests. However users of my application tend to not change their stored information very often (perhaps once every 20 or so times they load the application), so there's really no need for this data to be re-requested every time.
I've already taken steps to cache all of this data within the user's browser local storage, but here is where my problem lays: how can I know when the data I have cached is out of date?
In the past I've created similar cache mechanisms which ultimately rely on a 'version' flag. Both the data source and the user's local storage contain a 'version'. When both match, the application knows that it has the latest data, however when they are out of sync, the application knows it needs to re-request the data. The 'version' flag on the data source is ultimately changed every time an update occurs which impacts the user in question.
Ideally I want to end up with this flow:
User loads application.
Application compares local data version with version contained in Firebase.
If versions match, use local data.
If versions do not match, request all data.
Is it possible to do something like this with Firebase? Right now I can't see this possible without having to generate an extra set call every time the user's data is modified to change this version flag.
If this isn't possible, how can I know when a user's data needs updating without using up multiple requests?
If it helps, I'm using Firestore and this is a web application with no backend.

Getting desktop device id using javascript

I am working on a jump to page short cut option in the login page of one of my projects. This will basically lists a few pages in a dropdown of the login page. User can choose one among them to navigate to that page directly post login. I have a personalise jump to page short cut page and user can add his favourite pages to this dropdown. Now the question is about the storage. I was initially planning to store these favourite pages in the local storage. Since it is browser specific, if the user opens the app in another browser, the data won't be available. My second thought was to get a unique id for the desktop and store the data in the server using this unique desktop / machine id. Is there any way to get this id using JS / Angular JS.
Cross-browser sessions can never be supported because of security reasons (A web application is inherently not allowed to directly write to a file system and is allowed to only access local storage, that too the area allotted to the particular application).
Thus, one browser application will never be able to know what the application wrote for the second browser as they can't use the same local storage which means, they can never really share the states.
You can read more about Local Storages here.
on the other hand, If you actually create a web_app for the browser, then you should be able to get permissions to write to file-system and thus, the same application can work across browsers.

Web-based page session

I'd like to create a web app where the user is able to create a session, with the session being accessible even after leaving the page/browser.
An example would be http://lichess.org where the user goes to 'Create a game' and a page is created. That page then remains accessible even after the session is finished; see: http://en.lichess.org/i8pV0vEv
Essentially what I'd like to know is, what would be needed in order to create a similar effect. I've programmed tonnes over the years, just web environments are new to me! Scala seems like a contender, but in all honesty I have no clue. Perhaps javascript?
Any advice would be appreciated, thanks.
If you want to store user session data permanently irrespective of whether user is on the website or not you may use browser storage facility of HTML 5.
where you can store data on user's browser in form of key value pair and the data will be there permanently(based on type of browser storage you are using) and you can easily manipulate data using javascript.
There are mainly two types of browser storage.
Local Storage: will be there permanently and can be accessed anytime you want.
Session Storage: will be there till the page is open and cleared when user close the browser window.
For your requirement my recommendation is to go for Local Storage
Advantages of Using Local Storage
Can be manipulated easily using JavaScript.
Will be permanent.
No server-side scripting hence, fast to load and manage.
Disadvantages of using local storage
won't work in browser not supporting HTML5(supported in IE 8,chrome 4,Mozilla 3.5,safari 4,opera 11.5 and above)
User will be able to manipulate/delete the value(The browser storage value can be manipulated using resource option of Browser developer tool)
Wont be permanent if user is visiting in In-cognito/in-private mode.(but will be stored during the session.)
Data limit of at least 5MB
Data will be deleted when user clears browser history.
for further reference checkout w3schoold
http://www.w3schools.com/html/html5_webstorage.asp
Web programming is generally session-less and you need a cookie to simulate a session. You save this in your client's browser and in a database to be able to tie them together. Or you can use the browser-session which in the end is also a cookie, but does not scale very well as it's saved in the internal mechanisms of the web-server.
There's nothing Scala specific here, but if you would like to give Scala a try, have a look at Play framework. It's pretty beginner friendly and already has built in support for everything you would need like Sessions, Cookies and Database access.

Is it possible to generate a text or xml file from local storage data and save it in a folder?

I'm working on a website that is going to be offline. All the html files will be in a folder stored on the hard-disc. I've managed to do 90% of the work and the last part I have no idea of. Here is what it is:
I have stored a list of products in the localStorage as various strings under the keys - like buying objects and it goes to the cart, the cart objects are in localStorage. I created a page that showed the list of all the products in the localStorage. It can be cleared if the user clears them. Now I need to create a page where all the objects that was selected before, regardless of the localStorage being cleared, show as list in this page. You can take it as the page that lists products that have been ordered in the past, i.e even after the cart is cleared the products will show in the past-orders page.
I do not know any server side codes, I did everything using JavaScript as it was supposed to be a simple project, but I'm stuck at this part. So I cannot use PHP or anything to generate files or use a database to store stuff.
Here's what I thought but I don't think it works but wanted to confirm if it does or not:
Generate an XML file or a .txt file and store it in the drive and then clear the localStorage. But I don't think it is possible. If its possible just using JavaScript please point me in the right direction and I'll research and come up with something.
P.S. the website will be entirely offline what I mean is the users will never connect to the internet for this to work. Also there won't be a server or localhost.
Thank you!
The site is completely offline, but functionality is similar to an eCommerce site. You click a button and some content from the website stores in the localStorage and I have to call it in multiple pages, when a user clicks another button, localStorage clears but whatever was selected before must be available without localStorage. Hmmmm.. Consider a quiz site where you answer everything and when you take a new quiz, old scores will be stored somewhere else and it won't change when you take a new test.
Is it possible to attain this functionality without a server side script? It seems the final-targeted-users won't know how to install any softwares that can provide a localhost or a server or something like that.
Client-side, browser's JavaScript runtimes don't have local file system access excepting a very limited one when uploading files to a remote server, and anyway, browers won't give you direct access to the file.
You'll need some kind of server-side logic behind the scenes if you want full I/O in the local file system.
Perhaps you can take a look at NodeJS, a server-side JavaScript runtime that can work as lighty Web server on either small and large projects, and it has built-in server-side JavaScript I/O functions.
Otherwise, you're absolutely stuck in the client-side Web browser's sandbox limitations.
U can refer documents of knockoutjs and NodeJS.. That would probablky help... A far as my knowledger is concerned NodeJS does contain a way to handle your problem.

Pre-loaded Local Database Backend for Javascript (Possible?)

I have recently seen articles on HTML5 and local Db creation and usage. I have also seen some examples of Javascript connection strings to existing Access Db backends. I am interested in finding a way to build a Db, pre-load it with records, and use a web app to connect and read the Db. For example, I have created many standalone applications with Tcl, in Windows, that read off of Sqlite Db files. Essentially, the application (.exe file) and Db file sit next to each other in a folder and function like any other Db application, except without the use of servers.
I would like to be able to do the same, but with a web app (.html) and Db file. Does anyone know if this is possible? As an example, I wanted to build a language application that runs in any browser, with pre-loaded words saved in the backend. So there would be two files, the web app, and the db file.
Any suggestions or links to resources would be really appreciated. The only thing close that I could come up with was connecting to Access via OLE through Javascript, however I need a Db that is multi-platform like Sqlite.
Thanks,
DFM
Your web app, its local database, and the "priming" data will all have to start somewhere, so I'll assume this all gets rolling during a live connection to a web server. When this first hit comes in, you:
Deliver the page and related code.
In your JavaScript, test for the existence of the database.
Exists? No priming necessary. Do nothing, or sync, etc.
Doesn't exist? Build it and deliver initial data. If this is slow, you can give the user a friendly warning: "Setting up, please stand by." Depending on how you're pushing down all that data, you might even show a progress bar: "Initializing database: 10%"...
There is no step 3.
Once setup is complete, this app could be entirely local -- no net connection required -- as long as you code it without the assumption of non-local resources.
References:
Getting Started with HTML5 Local Databases
Offline Web Applications in HTML5
You can access an already created sqlite db file through javascript. Look at the "Location of Database File" area of this link http://code.google.com/apis/gears/api_database.html
I know this is for Google Gears, but Gears uses SQLite and the location still applies without Gears and only using a sqlite db file.
For example, I used a firefox add-on 'SQLite Manager' to create a sqlite db file on my local machine. I then copied that file to C:\Users\\AppData\Local\Google\Chrome\User Data\Default\databases\file__0
I was able to access the file using JavaScript in Google Chrome:
var db = null;
try {
if (window.openDatabase) {
db = openDatabase("mydbfile.sqlite", "1.0", "HTML5 Database API example", 200000);
....
You have to be careful with the file name in Chrome as it automatically names each sqlite db by an id number. For example, I had to rename my sqlite db file name to 14 to get it to read from JavaScript in the browser. Once I did this, it worked like a champ and I was able to access all tables, data, etc.

Categories