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

Asked 9/2, 2011 at 1:53 Answered 7/7, 2016 at 14:52

Solved javascript html flash local-storage

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.

Folia answered 9/2, 2011 at 1:53 Comment(6)

I don't think I would want my computer space to be consumed by cached videos... – Libreville 9/2, 2011 at 1:57

Possibly with Base64 encoding, but this would be more suitable for images rather than video. – Whiteley 9/2, 2011 at 1:59

@JCOC611: By large, I mean 10 - 30 megs. By many, I mean 10. There's an argument about using up someone's bandwidth (esp. in Canada!), but I don't think 100 - 300 megs of used space is going to kill you. Presumably it would be an opt-in feature (which is why plugin solutions could be acceptable). – Folia 9/2, 2011 at 2:4

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. – Melvinmelvina 9/2, 2011 at 2:5

Yes, actually it seems a good feature if it's optional. – Libreville 9/2, 2011 at 2:6

What about flash - does it have any file management mechanisms? – Folia 9/2, 2011 at 2:19

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.

Aeriform answered 9/2, 2011 at 2:2 Comment(1)

Wow, by even the standards, the browser is turning into an OS! – Melvinmelvina 9/2, 2011 at 2:33

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

Blueprint answered 30/9, 2014 at 9:18 Comment(0)

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 :)

Sverre answered 7/7, 2016 at 14:52 Comment(0)

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

Bodoni answered 9/2, 2011 at 2:4 Comment(5)

Thanks. "One thing to keep in mind is that you’re storing strings, not data in its original format." – Folia 9/2, 2011 at 2:10

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. – Melvinmelvina 9/2, 2011 at 2:18

@John I don't think you can compress compressed binary data any (much) further by turning it into text. – Bodoni 9/2, 2011 at 2:22

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. – Jacobian 9/2, 2011 at 2:46

@Jacobian 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. – Bodoni 9/2, 2011 at 2:53

Well most parts of html5 local storage are explained above.

here https://mcmap.net/q/588883/-need-read-xml-and-show-it-and-save-on-local-storage there was a similar question, not about videos but if you can add an xml to local storage.

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

Might help you.

Rainarainah answered 30/6, 2012 at 7:18 Comment(0)

FSO.js will wrap the HTML5 FileSystem API for you, making it really easy to store, manage, and manipulate sets of large files in a sandboxed File System.

Donohue answered 8/3, 2014 at 18:48 Comment(0)

Recommended topics

Hot tags