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!
Related
I am building a web app and I would like to show PDF files to my users. My files are mainly stored as byte arrays in the database as they are generated in the backend. I am using the embed element and have found three ways to display a PDF:
Local file path in src attribute: Works, but I need to generate a file from the database byte array, which is not desirable as I have to manage routines to delete them once they are not needed anymore.
Online file path in src attribute: Not possible since my files may not be hosted anywhere but on the server. Also has the same issues as the previous method anyway.
Data as base64 string in src attribute: Current method, but I ran into a problem for larger files (>2MB). Edge and Chrome will not display a PDF when I covert a PDF of this size to a base64 string (no error but the docs reveal that there is a limit for the data in the src attribute). It works on Firefox but I cannot have my users be restricted to Firefox.
Is there any other way to transmit valid PDF data from a byte array out of the database without generating a file locally?
You have made the common mistake of thinking of URLs and file paths as the same thing; but a URL is just a string that's sent to the server, and some content is sent back. Just as you wouldn't save an HTML file to disk for every dynamic page on the site, you don't have to write to the file system to display a dynamic PDF.
So the solution to this is to have a script on your server that takes the identifier of a PDF in your system, maybe does some access checking, and outputs it to the browser.
For example, if you were using PHP, you might write the HTML with <embed src="/loadpdf.php?id=42"> and then in loadpdf.php would write something like this:
$pdfContent = load_pdf_from_database((int)$_GET['id']);
header('Content-Type: application/pdf');
echo $pdfContent;
Loading /loadpdf.php?id=42 directly in the browser would then render the PDF just the same as if it was a "real" file, and embedding it should work the same way too.
I am trying to figure out where and how does Chrome save local storage.
I found the following folder (in my home folder) that seems to contain the local storage:
\AppData\Local\Google\Chrome\User Data\Default\Local Storage
In this folder I see files that corresponds to different URLs (the files contain URLs in their names). For each URL I see two types of files:
LOCALSTORAGE file
LOCALSTORAGE-JOURNAL file
I am interested in local storage of one particular web site. For this web-site the LOCALSTORAGE file contains only 6KB and the LOCALSTORAGE-JOURNAL contains nothing (0 KB).
On the other hand, when I open the web site of interest in Chrome and then press F12 I see in the local storage 6 different URL and if I click on one of them I see key-value pairs.
So, what I see in the folder and in the Chrome development tool is not consistent. Why is that? How can one find content of local storage in the directories? Or is it impossible?
The file is in SQL Lite format. Install SQL Lite, then type the following commands:
cd %LocalAppData%\Google\Chrome\User Data\Default\Local Storage
sqlite3 *filename*
select * from ItemTable;
.quit
The ItemTable table contains key-value pairs, the semantics of which depend on the individual website.
see the description of localstorage file here
it says : The extension LOCALSTORAGE indicates an application support file created by the web browsers using WebKit, such as Google Chrome and Apple Safari. These files store browser settings or local data for a browser extension, and enables extensions to store a local cache of user data saved in an SQLite database format.
You can browse localstorage files by a sql-lite browser, such as the open source program called sql-lite database browser
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!
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.
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.