保存 Javascript 数组以在另一个文件中使用

Question

编辑以尝试增加清晰度：

我有两个文件：number-crunching.js 和 chart.html。

number-crunching.js 有一个 JSON 对象：

var data = [
{
  "mother": "Ellen",
  "father": "Bob",
  "pet": "cat",
  "age":50,
  "hairLength":10
},

{
  "mother": "Sandra",
  "father": "Jeff",
  "pet": "dog",
  "age":18,
  "hairLength":2
}
];

然后它有一个 run 函数来处理该数据并返回一个多维数组，如下所示：

[
  ['mother', 'father', 'pet', 'age', 'hairLength'],
  ['Ellen', 'Bob', 'cat', 50, 10],
  ['Sandra, 'Jeff', 'dog', 18, 2]
]

创建此数组的所有内容都包含在一个名为 run 的函数中，该函数返回完成的数组。

在第二个文件chart.html（其中有一些JS）中，我包含了number-crunching.js 并调用run 函数并将该数组存储在chart.html 中。

var 已编辑数据 = run(); editedData 现在包含上面的数组。

然后，我在 html 页面上的图表中可视化editedData 的内容。

图表需要永远加载，因为它每次都在 run 函数中进行所有计算，这涉及多次循环遍历 JSON 对象，它是一个非常大的对象。所以页面加载需要很长时间。

我想要做的是分离这些文件。因此，我不想在chart.html 中调用run，而是只想将数组存储在chart.html 中。所以，我想运行一次数字运算并以某种方式保存数组，这样我就不必再进行任何数字运算了。

基本上，我只想使用数字运算和它的run 一次。也就是说，它应该将run 的结果保存在某处，以便我可以将数组复制到chart.html 文件中并将其用于我的Web 应用程序。

我该怎么做？感谢您的帮助，如果第一次不清楚，对不起。

Answer 1

您需要查看HTML5's FileSystem。

您需要创建一个文件并将您的数组以 JSON 格式推入其中。

Fiddle

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

function errorHandler(err) {
   console.log("Error happened");
   console.log(err);
}

var yourdata = [
  ['mother', 'father', 'pet', 'age', 'hairLength'],
  ['Ellen', 'Bob', 'cat', 50, 10],
  ['Sandra', 'Jeff', 'dog', 18, 2]
];

function onInitFs(fs) {

    fs.root.getFile('data.json', {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
console.log('Write completed.');
            };

            fileWriter.onerror = function(e) {
console.log('Write failed: ' + e);
            };

            var json = JSON.stringify(yourdata);
            console.log(json);
            var blob = new Blob([json], {type: "application/json"});
            fileWriter.write(blob);
        }, errorHandler);
    }, errorHandler);

}

window.webkitStorageInfo.requestQuota(PERSISTENT, 1024, function(grantedBytes) {
    // Is this a bug? This function is called instantly, i didn't even granted permission or anything. You need to refresh after granting permission.
    window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, errorHandler);