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

Posted 2023-05-07

【中文标题】javascript从客户端保存/加载图像+文本数据

【英文标题】：javascript save/load image + text data from client side

【发布时间】：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);
;

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

【参考方案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