如何通过网页读取/写入本地文件?

时间:2012-08-19 02:53:58

标签: javascript html local-storage read-write

我正在编写一个基于html的应用程序,并希望存储和检索本地文件中的数据。此应用程序不会托管在Web服务器上。

任何人都可以帮助启发有关如何做到的主题?

4 个答案:

答案 0 :(得分:2)

您应该使用FileSystem API HTML5:

window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(){
    fs.root.getFile('test.dat', {}, function(fileEntry) {
        fileEntry.file(function(file) {
            // Here is our file object ... 
        });
    });
}, errorHandler);

结帐FileSystem API以获取更多参考资料

访问The HTML5 Test以测试浏览器支持

答案 1 :(得分:2)

答案 2 :(得分:0)

IF(并且仅当)您的平台将是IE,您可以利用HTA(HTML应用程序)框架:

http://msdn.microsoft.com/en-us/library/ms536471(VS.85).aspx

使用它的应用程序被授予系统级权限,并且可以使用与Windows Scripting主机相同的对象(例如,文件系统对象来读取和访问本地文件)。

我过去曾成功地将它用于小型工作组应用程序并喜欢它 - 但这是在仅限IE的企业环境中。

答案 3 :(得分:0)

这个问题的答案取决于你对以下问题的回答:

  • 您是否认为目前仅在基于Chromium的浏览器(Chrome& Opera)中支持编写文件?
  • 您是否可以利用现在的专有API来利用这种能力?
  • 你是否可以在将来删除所述API?
  • 您是否可以将使用所述API创建的文件缩小到磁盘上的沙箱(文件无法生效的位置)?
  • 你是否可以使用虚拟文件系统(一种目录结构,它不一定存在于磁盘上,其形式与从浏览器中访问时相同),以表示此类文件?

如果您回答"是"对于上述所有内容,然后使用FileFileWriterFileSystem API,您可以使用Javascript从浏览器标签/窗口的上下文中编写文件。

怎么样,你问过?

<强> BakedGoods *

写文件:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

读取文件:

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

使用原始文件,FileWriter和FileSystem API

写文件:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {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);

读取文件:

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

但是,如果你回答&#34; no&#34;开头的任何问题?

如果您对非原生解决方案持开放态度,Silverlight还允许通过IsolatedStorage从标签/窗口竞赛中获取文件i / o。但是,managed code需要使用此功能;需要编写此类代码的解决方案超出了本问题的范围。

当然,一个使用补充托管代码的解决方案,只留下一个只写Javascript的解决方案,完全在这个问题的范围内;):

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

* BakedGoods由这个人维持在这里:)

相关问题