14

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

任何人都可以帮助启发主题如何做到这一点？

4

4 回答 4

4

您应该使用 HTML5 的 FileSystem API：

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以获取更多参考

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

于 2012-08-19T02:56:55.883 回答
3

尝试 HTML 5 文件系统 API

以下链接有详细信息

http://dev.w3.org/2009/dap/file-system/pub/FileSystem/

http://www.html5rocks.com/en/tutorials/file/filesystem/

于 2012-08-19T08:51:51.123 回答
2

这个问题的答案取决于您对以下问题的回答：

  • 您对目前仅在基于 Chromium 的浏览器（Chrome 和 Opera）中存在对写入文件的支持这一事实感到满意吗？
  • 您是否可以使用目前专有的 API 来利用这种功能？
  • 您对将来删除上述 API 的可能性感到满意吗？
  • 您是否可以将使用所述 API 创建的文件限制到磁盘上的沙箱（文件无法产生影响的位置）？
  • 您是否可以使用虚拟文件系统（磁盘上的目录结构不一定以与从浏览器中访问时相同的形式存在）来表示此类文件？

如果您对上述所有问题都回答“是”，那么使用File、FileWriter和FileSystem API，您可以使用 Javascript 从浏览器选项卡/窗口的上下文中写入文件。

怎么样，你问？

烘焙食品*

写入文件：

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

使用原始 File、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);

但是，如果您在开始时对任何问题回答“否”怎么办？

如果您对非本地解决方案持开放态度，Silverlight 还允许通过独立存储从选项卡/窗口竞赛中进行文件 i/o 。但是，需要托管代码才能使用此功能；需要编写此类代码的解决方案超出了此问题的范围。

当然，使用补充托管代码的解决方案，只留下一个 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 由这里的这个人维护 :)

于 2016-07-07T01:02:52.210 回答
0

如果（且仅当）您的平台是 IE，您可以利用 HTA（HTML 应用程序）框架：

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

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

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

于 2012-08-19T03:03:44.793 回答