Saving Local Application Settings - javascript

Is there any way to safely retain/save data (settings) other than IndexedDB and manual saving (prompt the user with a dialog box to save)?
Basically I am writing an offline application and will be bundled and deployed as a local html file (e.g. file:///D:/test/index.html, no servers, just run by double-clicking the html file). It will have some settings and I need to be able to save these settings locally. The first time the app boots up, I retrieve the settings from a app-settings.json file and save it to IndexedDB.
However, my problem is that when the user clears the browser data, the settings will be deleted as well.
I do not want to prompt the user with a dialog box asking to save the app-settings.json everytime an update is made to the settings. (It would also be prone to duplicate, misplaced settings)
Any suggestion on how to go about this? How can I safely retain the application settings without any servers? Maybe there is an offline database of some sort that can be used in scenarios like this?
Would appreciate any help here! I'm desperately out of ideas :(
Thank you!

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persisted();
console.log(`Persisted storage granted: ${isPersisted}`);
}
please enable persistent storage by enabling navigator.storage.persist, and I would suggest start using service workers to manage offline applications.
https://web.dev/persistent-storage/
https://developers.google.com/web/fundamentals/primers/service-workers

You Can use the
Use the Javascript File Api
https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API
The dialog to save the file will be shown once,
Then reading the file will not require a file dialog.
BTW
VS Code web also uses the api: https://vscode.dev/

Related

HTML5 Local Storage VS App Cache Offline Website Browsing

After going through multiple articles,
I am still not clear on the difference between Local Storage and App Cache Manifest.
Also referred: Is AppCache = Application Cache = Web Storage's LocalStorage? (SO 10986026), Application Cache is a Douchebag (A List Apart)
My AIM is to build a website with specific pages be allowed offline to user on user demand.
Steps followed :
I opened a site on Chrome : http://www.spritecow.com/
And checked AppCache : chrome://appcache-internals/
And the site was cached.
I closed Chrome and reloaded it. The cache was still there. Exactly what I need for offline browsing
Now how is this different from local storage? Tried to find the difference but all sites answer in purpose, i.e. AppCache for templates' caching and Local Storage for content within the template.
Certain sites do not prefer AppCache as it reloads entire cache for a single line change. Certain sites prefer only local storage. While some go for the combo of AppCache(template) and Localstorage.
Now the doubt is :
Local storage stores on client machine. How does AppCache storage is different if I can still access it even browser is closed.
As clearing cache will clear AppCache then i'd go for only Local Storage.
What is the best practice to be followed for offline browsing? I am completely new to this and need a little clarity on the same
EDIT
The doubt is not answered by the link (Is AppCache = Application Cache = Web Storage's LocalStorage?) as this gives difference but not based on the purpose of Offline Browsing Practices (which is the aim for this doubt).
AppCache use a manifest file to define what files used by the app should be stored (You can cache files and ressources like HTML pages, JS scripts, CSS styles, images,...)
LocalStorage will store data but not pages. So every javascript object that you can stringify can be stored in the localStorage.
So AppCache and localStorage aren't the same, but they are complementary.
Example
Imagine a web calendar that you want to be available offline (note: for this example, we use here a static page and data are loaded with javascript. The same can be made from a dynamic page, but this example use static).
The appcache will store the html page and the ressources that it uses (javascripts, css, images) to render you page.
As you have put in your manifest file everything to be cached for the next offline access, the pages are stored and you'll be able to display your page offline at the next visit.
But problem, your calendar is displayed but is empty. All meetings and events of the month aren't there. This is because your page is stored, but you still need network to load the meetings in your calendar. And as you're offline, you have no network...
If you want to have all your meetings available offline too, you'll have to store them in the localstorage (not in the appCache, because it's not a page, it's data accessed by JavaScript.)
So you will need to change your Javascript function from this :
function initApp() {
var data = loadDataWithAjax();
renderPlanning(data);
}
to this
function initApp () {
var data;
if(offline) {
data = loadFromLocalStorage();
} else {
data = loadDataWithAjax();
storeDataInLocalStorage(data);
}
renderPlanning(data);
}
Appcache will even work if you are totally offline and your browser is closed and then you open your browser and type in the URL while still offline — the page loads! Check this site here … load it once while online and then disconnect from the Internet and close your browser … and then reopen browser and try to visit it while still offline.
localStorage needs connection first to load the js code needed to get the data from it.

Reading cache using JavaScript

This is Two questions:
1/ How can I read the cache stored by the browser if there's no permission restrictions?
2/ If the user browse into a website, is there a posibility of storing the page source code [HTML] in cache? (big website like youtube ..etc)
Thanks.
There is no way to read the cache manually - it all happens behind the scenes, if there is cache.
Yes, you can store the website's source code to the browser cache, but only the client-side part - HTML/CSS/JS/images/fonts/etc. It's called HTML5 Application Cache and it consists in a simple manifest file, which instructs the browser to download certain files locally and next time load them instead of downloading again. This cache you can programmatically update. Keep in mind, though, that most browsers have a limit (usually 5MB) of how much data you can store.
Hope that helps.

Download HTML to iOS persistent storage and load/navigate to it

I've just started using Phonegap with iOS and I'm wondering if there's a way to update the look of the application remotely (forgetting about App Store updates in this case).
I know that I can store data in a local database on the device and in files, but I'd like to navigate to that downloaded file. My app would start and check for updated HTML and JS files on my server. If there were none, it would continue to use the HTML already saved on the device. I don't want to navigate straight to a page on my server as Apple native APIs wouldn't work and I want the app to work offline too. I found this existing Stackoverflow question asking for something similar and persistent storage was mentioned by a commenter. I want to find out if it's possible to navigate to something in persistent storage.
Is it possible to download a HTML with Phonegap/Apache Cordova and then navigate to it?
The answer is YES.
You'll need a FileTransfer,
then store the file to the filesystem
You have to store the absolute path in the local-storage and navigate to it
I'am pretty sure, that this app will be removed from the apple-app store, because loading code from a server is prohibited.
Apple will remove this app from the store.

Can JavaScript be used to push a file to another machine or web service

I'm relatively new to this
We have a requirement to save a file with out the use of the dialog box.
I was wondering if I can use AJAX or some other JavaScript to "Push" the file from the client PC being viewed in a browser to to some web service the client is running and have it save the file.
Do I get into cross site scripting issues or an issue I don't know about at present?
Thanks
With valums uploader script, users can drag and drop files (in certain browsers) to a button on the page.. so, yes, no dialog box, but it still requires user interaction. (I also know IE10 should be able to handle drag/drop functionality from one of their demos; so this kind of functionality is gaining ground).
I don't think you can upload a file without a dialog box. That would remove the user interaction, so it would be the same thing as allowing a webpage to select any file it wanted and upload it without user interaction - an obvious security flaw.
Generally, without a dialog box, no it can't be done.
HTML5 has a file API where the web app can store files on the local machine. But this access to the filesystem is sandboxed, so you get to access files only under your directory.
Why can't you do without a dialog box? Imagine you visit some site and it "uploads" files without your permission. That's a security FAIL. The dialog box is the user's authentication for the file to be uploaded.

Javascript local file saving or onSave event to get saved filename

I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.

Categories