javascript - Can you use HTML5 local storage to store a file? If not, how? - Stack Overflow

admin管理员组

文章数量:1026423

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.

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.

• javascript
• html
• flash
• local-storage

Share Improve this question Follow edited Nov 15, 2015 at 23:17 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Feb 9, 2011 at 1:53 MatrymMatrym 17.1k3535 gold badges9999 silver badges141141 bronze badges 6

• 5 I don't think I would want my computer space to be consumed by cached videos... – JCOC611 Commented Feb 9, 2011 at 1:57
• Possibly with Base64 encoding, but this would be more suitable for images rather than video. – jrn.ak Commented Feb 9, 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). – Matrym Commented Feb 9, 2011 at 2:04
• 2 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. – John K Commented Feb 9, 2011 at 2:05
• 1 Yes, actually it seems a good feature if it's optional. – JCOC611 Commented Feb 9, 2011 at 2:06

 |  Show 1 more comment

6 Answers 6

Sorted by: Reset to default 11

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/

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

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

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.

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

Well most parts of html5 local storage are explained above.

here https://stackoverflow.com/a/11272187/1460465 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.

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.

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.

• javascript
• html
• flash
• local-storage

Share Improve this question Follow edited Nov 15, 2015 at 23:17 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Feb 9, 2011 at 1:53 MatrymMatrym 17.1k3535 gold badges9999 silver badges141141 bronze badges 6

• 5 I don't think I would want my computer space to be consumed by cached videos... – JCOC611 Commented Feb 9, 2011 at 1:57
• Possibly with Base64 encoding, but this would be more suitable for images rather than video. – jrn.ak Commented Feb 9, 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). – Matrym Commented Feb 9, 2011 at 2:04
• 2 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. – John K Commented Feb 9, 2011 at 2:05
• 1 Yes, actually it seems a good feature if it's optional. – JCOC611 Commented Feb 9, 2011 at 2:06

 |  Show 1 more comment

6 Answers 6

Sorted by: Reset to default 11

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/

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

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

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.

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

Well most parts of html5 local storage are explained above.

here https://stackoverflow.com/a/11272187/1460465 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.

本文标签： javascriptCan you use HTML5 local storage to store a file If nothowStack Overflow