javascript从客户端保存/加载图像+文本数据答案

【问题标题】：javascript save/load image + text data from client sidejavascript从客户端保存/加载图像+文本数据
【发布时间】：2014-01-09 09:34:28
【问题描述】：

我希望我页面的用户能够保存和加载包含图像和数值的数据（单个文件）。

我找到了保存图片的方法

saveImgAs = function (img, fileName) {
    a = document.createElement('a');
    a.setAttribute('href', img.src);
    a.setAttribute("download", fileName);
    a.click();
}

和文本文件

saveTextAsFile = function (textToWrite, fileNameToSaveAs) {
    var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }
    downloadLink.click();
};

destroyClickedElement = function(event) {
    document.body.removeChild(event.target);
};

但我不知道如何将它们合并到一个文件以及如何重新加载该结构..
有什么想法吗？

【问题讨论】：

标签： javascript image load save blob

【解决方案1】：

您可能正在寻找 Web 存储，这是 HTML5 的一项新功能https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage。它最终将使您的整个过程更轻松，并且需要更少的类似 hack 的解决方案。

【讨论】：

【解决方案2】：

就像 Zeal 所说，只需使用 HTML5 的 Web 存储（也称为“本地存储”）。现在几乎所有的浏览器都支持它。这是一个简短的例子：

// Check if it is supported in your browser
function supports_html5_storage()
{
      try
      {
        return 'localStorage' in window && window['localStorage'] !== null;
      }
      catch (e)
      {
        return false;
      }
}

//make use of it:
if( supports_html5_storage() == true )
{
   localStorage.setItem("myItem", "myData");
   var myDataString = localStorage.getItem("myItem");
   alert(myDataString);
}

【讨论】：

这怎么可能是答案？！输出的必须是用户可以打开的单个文件，而不是本地存储实体，一般用户没有什么线索。或者如果我错过了什么，你能详细说明一下吗？
似乎没有要求用户可以自己打开单个文件。 Op 只是要求一种从单个文件加载/保存的方法。实际上，数据库实体甚至是一个文件。

【解决方案3】：

我使用 WebStorage API 和 localStorage 来保存和加载我的 js 游戏的游戏存档，所以我不太了解保存和加载文件，但这应该可以帮助您将其保存为一个文件，这似乎成为这个问题的症结所在。

将您的图像转换为 base64 字符串。

How to convert image into base64 string using javascript

将您的图像字符串和数值保存到单个对象中。

使用 JSON.stringify() 方法将对象转换为字符串。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

将 JSON 字符串保存为文件。

Writing a json object to a text file in javascript

当您加载文件时，使用 JSON.parse() 将其恢复为对象。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

【讨论】：