I have some confusion about the storage of html5 vs web browser storage
the thing which is confusing me is that when we say that html5 storage what do we mean by it and what do we mean when we say web browser storage are they different things or same thing with different Terminalogies kindly correct me
HTML 5 added additional storage options that allow you to store a lot more data. They are localStorage and sessionStorage
In the past your only option was "cookies," which were not reliable beyond a 100K or so. At best these would just save a session pointer, with most of the data actually stored on a server. Unlike cookies, localStorage isn't bound by an expiration date.
"Web browser storage" is a generic term, that doesn't necessarily mean cookies. Your two basic options are server storage (database, flat files, etc) or web browser storage (cookies, HTML5 localStorage, sessionStorage, page variables, etc).
I want to create a web-app using HTML5, CSS3 and possible JQuery mobile. This app will just be a form used to collect customer data but it needs to be able to work offline.
I've created offline web-apps before and used manifest files to make them offline but is there a way to make a form store data on the device for uploading to a computer or server later?
There are plenty of solutions for offline storage in HTML5, but all depend on which browser you want to support? localStorage is perhaps the most widely supported at the moment, there was also web SQL databases and so forth: http://www.html5rocks.com/en/tutorials/offline/storage/
I am currently looking to write a web app in HTML5. It is my first HTML5 web app.
The main feature of this app is its offline feature. When I mean offline, it will be something like C:\APP\index.html (for Windows ), and it will be the same thing for Mac. So with that said, I have been looking into LocalStorage, WebSQL, IndexedDB.
And I come to this conclusion that LocalStorage is not going to be good enough for the web app that I am going to write. The IndexedDB only for all the major browsers except safari. Safari (desktop & iOS) supports WebSQL not IndexedDB. And then I found out that WebSQL is not going to be supported.
So I am wondering if there is a "universal" solution to my dilemma? Or Should I have code IndexedDB and WebSQL so that it will work on all the browsers? Any suggestions are welcome.
Your app is the only thing that needs to be accessing the data it stores, right? If so, data is data is data, and as long as you include everything you need to read, write to, and understand the information your data encodes, it doesn't matter one bit (no pun intended) what format you use to store it. Whatever language you are using to create the app, it will have library functions that can manipulate stored data.
If worst comes to worst, you can always go with the lowest common denominator and use a raw binary or text file; those are the only true universal formats.
I just wanted to hear opinions.
I know that now it is not really possible to build a native (desktop, tablet) like web app that contains (should work in offline mode with) a bunch of multimedia content (there is no consistent way to store and access multimedia data on the client).
Do you see any steps in this direction or such apps will be a native platform privilege in future as well?
Offline storage appcache does more or less what you are asking for. It's actually quite possible, at least in modern browsers. Check it out:
http://html5doctor.com/go-offline-with-application-cache/
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
https://developer.mozilla.org/en/Using_Application_Cache#Browser_Compatibility
In addition to offline storage, there are HTML5 File APIs that you can use. I believe Google Chrome lets its form of 'Apps' use the file APIs.
http://dev.w3.org/2006/webapi/FileAPI/
For storing data offline WebApp can use:
session storage, "advanced version of cookies"
key/value based Web Storage (AKA local/global/offline/DOM storage)
sql-based Web SQL Database (deprecated) and Indexed Database API
FileReader and FileWriter API (requires user to select files each time the application loads)
But apparently there is no File Storage. Of course, there is a manifest-based caching, but it's just a cache and is not supposed to be used as a user data storage.
Does it mean that the user of WebApp is forced to use some sort of a cloud file storage?
Is there any way to save large files on user's local machine? Or maybe some way to select a local folder web application can use to store user data?
Edit. Security. HTML5 already has the ability to write big portions of data to user's local machine. I don't see any security issues if a browser will provide another, file-based abstraction to store data. It can be some virtual machine, virtual filesystem, whatever.
Hm, I think, it is possible to write JS filesystem and store it as a blob in SQL...
Similar questions.
Update:
Hm... recently I've found this and this. Maybe it is what I'm looking for... Yes, it is! See the answer below.
At last, I've found it! Here's the answer:
I’ll have the DOMFileSystem with a side of read/write access please wrote:
Eric Uhrhane of Google has been
working on the working draft of the
File API: Directories and System specification which defines a set of
APIs to create a sandboxed filesystem
where a web app can read and write
data to.
Wow! I'm so excited!
Why not use localStorage while the user is editing a document and the FileWriter API when they want to save it to disk? Most people are used to seeing a save dialog pop up when saving a document.
The only scenario I can think of that warrants userless access to the FileWriter API is an autosave feature, but autosaving to localStorage can be just as good.
There is a way to save relatively large files to a users hard drive if you are willing to use Flash. Look into Downloadify:
http://www.bitrepository.com/downloadify-client-side-file-generation.html
Downloadify allows you to send data to a SWF and have that SWF create a file on the users machine. My recommendation would be to store the data via one of the methods you listed, Webstorage, sqlite database, etc. Put all your assets, including the SWF in the manifest file so everything is cached locally to the browser. You can then pull information from your db or webstorage and use the SWF to create the files you need.
I'm not sure if you will be able to read these files back into your web application.
Another option to save data is by using link tags with the data URI scheme. However, I'm not sure if it is supported in all the major browsers at the moment.
For security reasons you can't write files to a user's local filesystem in case it gets used for nefarious purposes by evil people.
That's not likely to change, and that's a good thing.
The HTML5 FileSystem API started landing in Chrome 8 and is fairly complete as of now (Chrome 11).
There's a nice tutorial on it here: http://www.html5rocks.com/tutorials/file/filesystem/
http://fsojs.com wraps the FileSystem API effectively, if you want an easy solution
As mentioned by others here, the FileWriter and FileSystem APIs can be used to store files on a client's machine from the context of a browser tab/window.
However, there are several things pertaining to these APIs which you should be aware of:
Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
A virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs
IsolatedStorage, which hasn't been mentioned as of yet, also allows for file i/o from a tab/window context, but it is made available through solely through Silverlight and requires the use of managed code to access. It, like FileSystem, also exists in a sandbox and makes use of a virtual file system.
Given the high market penetration of both Chromium-based browsers and Silverlight (support for which, interestingly enough has been dropped by such browsers), you may find a solution which uses the first of the above approaches available on a client machine satisfactory.
BakedGoods, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native (including IsolatedStorage) storage facilities, is an example of such a solution:
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Just for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .