Can you use HTML5 local storage to store a file? If not, how?

Question

How would one go about caching / managing many large files (videos) on a user's computer via browser mechanisms (plugins are acceptable solutions). From what I can tell, local storage is about database type data, not files.

Solution 1

The FileSystem API[1,2] was going to be your best bet going forward, at one point it was very much bleeding edge. However it has been been abandoned by w3c. From their own documentation:

Work on this document has been discontinued and it should not be referenced or used as a basis for implementation.

1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
2. http://www.html5rocks.com/tutorials/file/filesystem/

Solution 2

HTML5 FileSystem API is dead as others have said. IndexedDB seems to be the other option. See here.

Solution 3

The answer to this question depends on your answers to the following questions:

• Are you fine with the fact that support for writing files currently exists only in Chromium-based browsers (Chrome & Opera)?
• Are you fine with utilizing an as-of-now proprietary API to take advantage of such a capbility?
• Are you fine with the possibility of removal of said API in the future?
• Are you fine with the constriction of files created with said API to a sandbox (a location outside of which the files can produce no effect) on disk?
• Are you fine with the use of 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) to represent such files?

If you answered "yes" to all of the above, then with the File, FileWriter and FileSystem APIs, you can read and write files from the context of a browser tab/window using Javascript.

Here are simple examples of how the APIs are used, directly and indirectly, in tandem to do these things:

BakedGoods*

Write file:

//"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64; raw binary data can
//also be written with the use of Typed Arrays and the appropriate mime type
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Read file:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Using the raw File, FileWriter, and FileSystem APIs

Write file:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                //"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64;
                //raw binary data can also be written with the use of 
                //Typed Arrays and the appropriate mime type
                var dataBlob = new Blob(["SGVsbG8gd29ybGQh"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Read file:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

---

Since you're also open to non-native (plug-in based) solutions, you can take advantage of file i/o enabled by Silverlight in IsolatedStorage, access to which is provided through Silverlight.

IsolatedStorage is similar in many aspects to FileSystem, in particular it also exists in a sandbox and makes use of a virtual file system. However, managed code is required to utilize this facility; a solution which requires writing such code is beyond the scope of this question.

Of course, a solution which makes use of complementary managed code, leaving one with only Javascript to write, is well within the scope of this question ;) :

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

*BakedGoods is maintained by none other than this guy right here :)

Solution 4

HTML5 local storage is currently limited to 5MB by default in most implementations. I don't think you can store a lot of video in there.

Source: https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

Solution 5

Well most parts of html5 local storage are explained above.

here https://stackoverflow.com/a/11272187/1460465 there was a similar question, not about video's but if you can add a xml to local storage.

I mentioned a article in my answer in the article javascript is used to parse a xml to local storage and how to query it offline.

Might help you.

View more solutions

Comments

[JCOC611]

I don't think I would want my computer space to be consumed by cached videos...

[John K]

W3C specifies an intention of web storage is large local caching: "In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons." -- dev.w3.org/html5/webstorage But I would give the user the option to enable your app (give it permission) to do that - just a personal preference though, although seemingly shared by others.

[JCOC611]

Yes, actually it seems a good feature if it's optional.

[Matrym]

Thanks. "One thing to keep in mind is that you’re storing strings, not data in its original format."

[John K]

Do you think there would be any size reduction wins by taking the Base64 encoding of the video, compressing it, and then taking the Base64 encoding of the compressed file to put in web storage? I've seen compressed text get down to a fraction of the original size. It would also be power hungry to decode and decompress.

[Gromski]

@John I don't think you can compress compressed binary data any (much) further by turning it into text.

[John K]

Wow, by even the standards, the browser is turning into an OS!

[Klinky]

The whole point of Base64 encoding binary data is to allow you to store it as a string, if you compress that string it turns back into binary data, so you basically shoot yourself in the foot.

[Gromski]

@Klinky You could compress the text using a text compression algorithm that basically shuffles letters around. I.e. it stays Base64 encoded, just "optimized". I don't think you'll have much success with already compressed, random data though.