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, lo

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 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

Answer 5

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/

Answer 6

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