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!
Related
I need to develop a simple webapp with a login system, users and data saved to each one of those users, with no knowlege of PHP or Data bases, only HTML, JavaScript/JQuery and JSON.
I must be able to sign up, log in and save some data (it's an online store, i must be able to save purchases historic, list of avourite products, user preferences, etc), all this locally only.
What is the best way to do this?
Security issues are not relevant.
I'm sorry for the bad english, I'm not a native speaker.
Hope you can help me!
You can use localstorage to use it as a db engine, but it is really limited,
You can use IndexedDB to use a localdb for you webapp.
Than will help you yo achieve your goals.
Remember that only moderm browser support IndexedDB, so you can check if your browser support it, else you can send a message for the user, to update the browser or fallback to localstorage
Since you are not using PHP, i would Recommend looking into using Node.js for the server-side part of your app. Node.js is written with javascript, so it will be relatively easy to learn.
On the website, you can use HTML forms to send data to the server using JSON. The other parts of your app can be built using HTML, CSS and javascript.
Although i recommend using SQL, there are other ways to store data like using MongoDB.
so I have seen a lot of people using local storage to store certain parts of a web page but not an entire web page is it possible? , if so how? , if not is there a way to store an entire web pages data so the user can come back to it how they left it?
This can be done if you use javascript to save document.body.innerHTML into the webstorage and you use javascript to load it back from the storage when the page is loaded next time. If the web page is not in the webstorage, you could redirect the user to the web page.
But this depends on the design of your web page and if there is session index etc in the body of the web page.
You should also think of some way to handle versions. You dont want your users only use the cached version of your web page, but it should be updated once you update your web page.
The session storage is ~5mbit, so you cant save very much, especially not pictures.
Since LocalStorage allows you to store about 5MB~ you can store a full webpage there and then just call it into a document.write().
The following code does it:
Storing it:
var HTML = ""; //html of the page goes here
localStorage.setItem("content", HTML);
Retrieving it:
document.write(localStorage['content']);
Although this is possible it is common practice you only save settings and load them up into the right elements rather than the entire web page.
This is not really answering your question, but, if you are only curious how this can be done and don't need to have wide browser support, I suggest you look into Service Workers, as making websites offline is something that they solve very well.
One of their many capabilities is that they can act as a proxy for any request your website makes, and respond with locally saved data, instead of going to the server.
This allows you to write your application code exactly the same way as you would normally, with the exception of initializing the ServiceWorker (this is done only once)
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
https://jakearchibald.github.io/isserviceworkerready/
Local storage it's actually just an endpoint: has an IP address and can be accessed from the web.
First of all, you need to make sure that you're DNS service points on your Index page.
For example, if your Local-storage's ip is 10.10.10.10 and the files on that local-storage is organized like:
contants:
pages:
index.html
page2.html
images:
welcome.png
So you can point your DNS like:
10.10.10.10/index -> /contants/pages/index.html
In most of the web frameworks (web framework it's a library that provide built in tools that enable you to build your web site with more functionality and more easily) their is a built in module called 'route' that provide more functionality like this.
In that way, from you index.html file you can import the entire web site, for example:
and in your routes you define for example:
For all the files with the .html extension, route to -> 10.10.10.10/contants/pages/
For all the files with the .png/.jpg extension, route to -> 10.10.10.10/contants/images/
Local storage is usually for storing key and value pairs, storing a whole page will be a ridiculous idea. Try instead a Ajax call which Returns an partial view. Use that for the purpose of manipulation in DOM
I'm looking for ways to use jsGrid (http://js-grid.com) as local application.
I've found basic.html in demos folder from git-project and I noticed that changes made to the example datagrid are not committing (after refreshing a local copy of basic.html all changes revert to initial values). As far as I understand changes made to the table are in memory and main script doesn't save them to db.js where datasource (json-dictionary clients) is located. And as confirmation I found that implementation of updatingClient-function in db.js is empty (due to obvious in-memory realization).
Questions I want to ask:
1) How could I make this application to use external but local datasource? Should it be some kind of this pseudocode in db.js:
db.clients = csv2json('clients.csv') (assuming there is an additional jquery-plugin to do this task) ? Are there any more convenient approaches?
2) If the first question is reasonable how should I implement the updateClient function considering using by multiple users simultaneously? Is it possible?
3) I need some kind of time logging of actions performed on the datagrid. Should it be implemented by binding certain elements to log-functions on main page via click events? If so, how could I get time stamps from these functions?
If you install xampp, you will have apache, PHP and MySQL - all local.
Otherwise, you can install sqlite or Codernitydb (better), which are local databases that do not require Internet access.
I've seen several other questions on SO that are similar to this, but none of them are really what I'm looking for, so hopefully this won't be seen as a duplicate.
I have a client-side Javascript/HTML5 web application built with jQuery Mobile. I am finding that performance can be quite slow and it was suggested that having too much going on in the DOM could be the cause. My app does have several data-role="page" divs that could be bulking up the DOM in a single html page. I'm trying to split my app into several html pages to improve performance, but I want the experience to be seamless for the user. This means I will need to pass Javascript variables between the physical html pages within my app.
So far I've seen the following options in my searching:
Use a query string in the url going to the other pages. - I'm not sure I want my users seeing a what could be a rather large and confusing query string in the address bar.
Use server side code like ASP.Net or PHP to handle postback data. - I'm open to this, but I'm not really sure how it would work. I don't want to convert my html pages to aspx or php files. Could I have a simple server side script that could embed the postback data into a regular html file?
Use Cookies to store relevant data. - I'm not to sure of this one either because the majority of my users are in enterprise environments that may limit cookie usage.
Are there any other methods for accomplishing this? At this point, I'm leaning toward some sort of server side processing. If that is the best method, could someone point me in the right direction for figuring out how to do that?
Try out Local Storage or Session Storage http://www.w3schools.com/html/html5_webstorage.asp
Local Storage would be a way to go if you are HTML5 compliant. It will store values, reduce the calls to any server until you are actually ready to update all the info and the info will be present even when the browser is closed; use session storage or JS like this
window.onbeforeunload = function() {
localStorage.removeItem(key);
return '';
};
if you need to clear local storage of sensitive info on closing the browser.
Remember that anything you pass into local storage will come out as a string so you will need to convert it to the appropriate data type when you get the info out of storage.
You'll also be limited to storing 5 megs of data (I believe that is standard) but you probably have other issues if your form requires that much info. :)
Check these out for more info
http://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx
http://dev.w3.org/html5/webstorage/
You could use a POST instead of GET if you're only concern with the GET is the user seeing lengthy querystrings.
Use localStorage. localStorage lets you store values in the browser.
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