I'm working on an offline application in Javascript that will convert a <div> to <canvas> and save it as an image to a location in local disk.
I'd prefer if the saving has no dialog and to save to the same location (set in configuration) every time.
I'm still going through the documentation on Cache API but there doesn't seem to be any answers in regards to setting absolute paths. All the examples show relative paths. I'd like to set it to something like C:/Users/Work/Presentation/file1.jpg, and have it overwrite itself every save.
Is this possible with Cache API or is there another offline storage API (localstorage won't work because it only stores k-v pairs) that would better suit this use case? Is there a library that already exists to make this implementation easier?
Why not save the image data as a base-64 encoded image or a BLOB in localStorage? And deal with encoding/decoding in your code?
You can try these packages:
https://www.npmjs.com/package/base64-img
https://www.npmjs.com/package/blob-util
And, Yes. You should change your Username. ;)
Have you tried PouchDB, via their home page.
PouchDB was created to help web developers build applications that
work as well offline as they do online.
It enables applications to
store data locally while offline, then synchronize it with CouchDB and
compatible servers when the application is back online, keeping the
user's data in sync no matter where they next login.
Related
I have a question that might seem a bit vague and that is because Im not sure the best way to proceed.
I have a HTML page that I need to be able to run offline. I need it to collect and be able to edit/delete info from a database, and I need that database to be situated somewhere in the computers local network files. Im not sure which route to go down for this to work.
I have looked into saving the data as a .json file, but then the data cant be changed/deleted by the browser.
I have looked into using the browsers local storage but what I need is for when the database is updated on one computer using the local network, it needs to show the update on other computers connected to the same network. Local storage only works for one instance of the browser, as far as I can tell, the local storage cannot be shared to other computers.
I have looked into using SQLite, but I cant use php, because then I take it I need a testing server to be able to see the page. I could set up something like WAMP but Id prefer not to have to start that before the page can be opened. Also Im not sure if that can be accessed from other computers.
I have looked into using SQLite and access it with javascript using SQL.js. This is my prefered method at the moment, but it seems that it stores the database to system memory instead of within the local networks file structure, and I assume that cant be reached by other computers on the network.
Anybody have any ideas for a way to make this work?
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 made a webpage (todo app) that uses locale storage for saving the data in json format. I use it on my smartphone (android) so all data is stored locally on my device (ca 200 kB)
Now, I would like to backup the data somehow. I have tried different approaches (email, post form, copy-paste) but none of them has worked so far. Is there an easy straigt foreward way to do this?
You don't have control over the localStorage to that extend. But there are several ways to store data across different storages (e.g. evercookie) even though I would not use that at all (not sure how legal that is, if at all)
But the best way would probably be to backup the data on your server and periodically let your users send their localStorage to you if there were changes.
If the localStorage got wiped, then just ask the server to send back the last stored set of data for that user.
If you are using Cordova/Phonegap you might want to look into http://docs.phonegap.com/en/1.4.1/phonegap_file_file.md.html#FileWriter to create a copy of the localStorage as physical file.
I'm using Javascript SDK to access Dropbox Datastore API. I noticed that each time i call open(Default)Datastore(...) whole datastore is downloaded to browser using (...)/datastores/get_snapshot endpoint. Is there any way to store records in localStorage and download only those that have changed since some time (simply sync them instead of download them all)? Imagine that user has 10MB in its Datastore. Now - each time when he/she refresh page with my javascript app 10MB will be downloaded? How can implement it?
Regards.
No, local caching isn't something that's supported with the current JavaScript SDK. It's a feature we're already considering adding in the future.
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