Storing HTML5 localstorage data to some other file - html

Is it possible to store HTML5 local storage data to some other .txt or .doc or excel file?
Because, i want to backup the local storage data to some other file.

If your question is asking whether it is possible to tell the browser to translate local storage to a .txt or .doc file, the answer is no. Local storage is implemented in the browser and stays in the browser (as defined by W3C).
If you want to have some mechanism that converts local storage data to a file system file, you probably want to use the File API instead.

You can create a client side file using HTML5. This link shows how to do that. Be careful though, not all browsers support this feature.

Related

Load and Save JSON file react client-side only

I am building a simple editor-type application in react-redux, and I want to mimic the operation of downloading and uploading json files for saving and loading data - entirely client side. The server side does not need the data. Local storage may be too small, and it would be nice to provide the user the data in a portable file they could upload on a new machine. Is this even possible, and if so how?
Using a blob file.
You can set the content of a new file which is temp and local, then trigger a click event to download the file.
duplicate answer here and here

Open binary file from HTML5 offline web application

I'm able to use HTML5 standard File API and IndexedDB to store large binary files in the browser.
However, when offline, I need to be able to open these files. Using data URLs works great for small files, but none of the browsers support 10Mb file opening through data URL. Is there any other solution, except for non-standard window.webkitRequestFileSystem?
I've actually found an answer here: https://developer.mozilla.org/en/docs/Web/API/Blob.
It is possible to save result of FileReader.readAsArrayBuffer in IndexedDB. When offline, it is possible to create a blob from this typed array and then create data URL to be passed to window.open function. Works with large files!

Load local image, modify it and save back to same file

File input allows user to access a local file from browser. Is it possible to load a local file given by file input, modify it and save it back to same local file? I know that HTML5 allows creating writeable filesystem, but basically it seems to be abstract directory.
For security reasons, I don't think the browser can overwrite the local file. Using the File-System API you could only copy the contents of the local file to the sandboxed File-System API directory(found under various obfuscated file names). All manipulation/saving would be done in AppData.
Perhaps displaying the modified image on the screen, right click, save-as to the given file location would also be suitable? (other than that I think you have to upload the image to a server and download it back again)

Temporary file handle storage in HTML5

Is it possible to obtain file handles in HTML5 and store it as a blob in webDB for upload later?
(Upload selected images when the 3G network is available again, without re-selecting the files.)
The HTML5 will be loaded from the local client device and
action="http://.../insert.jsp"
be used to upload the files to the server.
Any help or ideas will be very useful.
C-:
Any File object can be converted to an URL.
It is simple to do by using object URLs as described by:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
(I still have to confirm that the URLs remain valid across sessions.)
And it does not remain valid across sessions in Chrome!

How is HTML5 WebStorage data physically stored?

In using the HTML5 WebStorage functionality, I know that certain browsers, like Chrome, have developer tools that enable users to browse thru the contents of their WebStorage for debugging and trouble-shooting purposes.
I was wondering if it is possible to view the contents of web storage in the file system. Is this content stored in text files on the file system that are in some standard location? Or is this data stored in some proprietary binary format by the various browsers and is not designed to be accessible or viewable by browsing the file system?
My motivation for asking this question is to see if you can view the content of WebStorage on the file system as an aid to development and debugging, and also just out of curiosity too see how this data is actually stored.
Thanks.
Chrome uses SQLite for LocalStorage.
I confirmed this by going to AppData\Local\Google\Chrome\User Data\Default\Local Storage on my local PC and viewing the contents of a file. The files start with "SQLite format 3" when viewed via a text editor. You will need a SQLite database viewer to view the data.
On Mac OS X, this was at ~/Library/Application Support/Google/Chrome/Default/Local Storage
I used the Command Line Shell For SQLite to look around. Assuming www.example.com was a real site, you can run these commands:
$ sqlite3 http_www.example.com_0.localstorage
sqlite> .tables
ItemTable
sqlite> .schema
CREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value BLOB NOT NULL ON CONFLICT FAIL);
sqlite> select * from ItemTable;
stringkey|value
jsonkey|{"key","value"}
sqlite> .exit
See Where does firefox store javascript/HTML localStorage? for the Firefox storage location.  Chrome uses individual sqlite files per hostname and protocol, where Firefox uses a single webappsstore.sqlite file with the reversed hostname and protocol in a scope column.
See Where the sessionStorage and localStorage stored? for the Opera storage location. Opera uses an XML index file and individual XML files for the Base64 encoded data.
Just wanted to contribute for IE 11.
The localstorage is stored in: C:\Users[YOUR USER ACCOUNT]\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore
However, it is hidden by default. To show this folder you have to:
Folder Options --> Uncheck "Hide protected operating system file"
Back to folder, you will see some sub folder inside. Go to each folder will see some XML files according for websites.