Question

我知道出于安全原因，Javascript无法在文件系统中写入数据。我经常读到，使用Javascript在本地保存数据的唯一方法是使用cookies或localStorage。

但有可能，在特定情况下，本地 （而不是通过互联网）访问文件本地？（没有任何服务器语言，甚至根本没有任何服务器......只是本地浏览HTML文件）

例如，可以通过点击 SAVE 来on this page ...

... HTML文件被新内容覆盖了吗？（即按下 SAVE 时应更新本地 HTML文件。）

enter image description here

当本地访问HTML页面

时，是否可以通过Javascript保存文件？
注意：我希望能够以静默方式保存，而不是建议用户必须选择下载位置的“下载/保存”对话框，然后“您确定要”吗？覆盖“等等

编辑：为什么这个问题？我希望能够做一个HTML / JS记事本，我可以在没有任何服务器的情况下在本地运行（没有apache，没有php）。我需要能够轻松保存而无需处理对话框“你想在哪里下载文件？”。

Answer 1

您可以使用Blob功能：

function save() {
  var htmlContent = ["your-content-here"];
  var bl = new Blob(htmlContent, {type: "text/html"});
  var a = document.createElement("a");
  a.href = URL.createObjectURL(bl);
  a.download = "your-download-name-here.html";
  a.hidden = true;
  document.body.appendChild(a);
  a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here";
  a.click();
}

，您的文件将保存。

Answer 2

来自the W3C File API Standard 的规范答案：

用户代理应提供暴露给脚本的API，以暴露上述功能。无论何时发生与文件系统的交互，UI都会通知用户，从而使用户能够完全取消或中止交易。用户会收到任何文件选择的通知，并可以取消这些选择。在没有用户干预的情况下，不会默默地调用这些API。

基本上，由于安全设置，每次下载文件时，浏览器都会确保用户确实想要保存文件。浏览器并不能真正区分您计算机上的JavaScript和来自Web服务器的JavaScript。唯一的区别是浏览器如何访问文件，因此在本地存储页面不会产生任何影响。

<强>解决方法：但是，您可以将<div>的innerHTML存储在cookie中。当用户返回时，您可以从cookie中加载它。虽然它不是将文件正确保存到用户的计算机，但它应该与覆盖文件具有相同的效果。当用户返回时，他们将看到他们上次输入的内容。缺点是，如果用户清除他们的网站数据，他们的信息将丢失。由于忽略用户清除本地存储的请求也存在安全问题，因此无法解决此问题。

但是，您也可以执行以下操作：

使用Java小程序
使用其他类型的小程序
创建桌面（非基于Web）应用程序
请记住在清除网站数据时保存文件。退出页面时，您可以创建弹出并提醒您的警报，甚至可以打开保存窗口。

使用Cookie ：可以在本地网页上使用JavaScript Cookie。只需将其放入文件中并在浏览器中打开即可：

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p id="timesVisited"></p>
  <script type="text/javascript">
    var timesVisited = parseInt(document.cookie.split("=")[1]);
    if (isNaN(timesVisited)) timesVisited = 0;
    timesVisited++;
    document.cookie = "timesVisited=" + timesVisited;
    document.getElementById("timesVisited").innerHTML = "You ran this snippet " + timesVisited + " times.";
  </script>
</body>

</html>

Answer 3

是的，这是可能的。

在您的示例中，您已经在使用ContentEditable，并且该属性的大多数教程都有某种localStrorage示例，即。 http://www.html5tuts.co.uk/demos/localstorage/

在页面加载时，脚本应检查localStorage的数据，如果为true，则填充元素。单击保存按钮时，内容的任何更改都可以保存在localStorage中（或者在链接的示例中，使用模糊和焦点自动保存）。此外，您可以使用此代码段来检查天气用户是在线还是离线，并根据状态修改您的逻辑：

// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}

编辑：更多高级版本的localStorage是Mozilla localForage，它允许存储除字符串之外的其他类型的数据。

Answer 4

您可以使用FileSystem-API和webkit保存文件并使其保持持久性。您将不得不使用Chrome浏览器，它不是标准技术，但我认为它完全符合您的要求。这是一个很好的教程，展示了如何做到http://www.noupe.com/design/html5-filesystem-api-create-files-store-locally-using-javascript-webkit.html

为了表明它的主题，它开始向你展示如何使文件保存持久......

window.webkitRequestFileSystem(window.PERSISTENT , 1024*1024, SaveDatFileBro);

Answer 5

将HTML内容转换为数据uri字符串，并将其设置为锚元素的href属性。不要忘记将文件名指定为download属性。

这是一个简单的例子：

<a>click to download</a>
<script>
    var anchor = document.querySelector('a');
    anchor.setAttribute('download', 'example.html');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<p>asdf</p>');
</script>

只需在浏览器中试用，无需服务器。

Answer 6

看看这个:) Download File Using Javascript/jQuery 应该有你需要的一切。如果您仍然需要帮助，或者它不是您需要的解决方案，请告诉我;）

Answer 7

我认为在这种情况下澄清服务器和客户端之间的区别非常重要。

客户端/服务器是一种程序关系，其中一个程序（客户端）从另一个程序（服务器）请求服务或资源。

来源：http://searchnetworking.techtarget.com/definition/client-server

我不确定您是否会找到太多不具备至少一个服务器/客户关系的高级应用程序。要求在没有任何服务器的情况下实现这一点有点误导，因为 任何时候你的程序与另一个程序说话，它是客户端/服务器关系 ，请求者是客户端和来自服务器的响应。即使你在当地工作也是如此。当您想要在浏览器范围之外执行某些操作时，您需要在服务器中使用挂钩。

现在，这并不意味着如果没有服务器端特定语言，您无法实现这一目标。例如，this solution将NodeJS用于服务器。 WinJS有WinJS.xhr，它使用XmlHttpRequest向服务器提供数据。

AJAX旨在提供相同类型的功能。这里的要点是，当您发出类似＆＃34; 保存文件＆＃34;的命令时，您是否有程序或预先构建了某种钩子。并且文件实际上被保存了，另一方面有一个解析它的程序，无论是服务器端语言还是别的东西，这意味着没有服务器你就不可能拥有这样的功能。收到请求。

Answer 8

只需使用https://github.com/firebase/firepad - See it in action
这不需要您的计算机上的服务器，它将远程伸出并保存数据。

Answer 9

是的，是可能的。以身作则证明：

TiddlyFox：允许通过插件修改本地文件。（source code）（extension page）：

TiddlyFox是Mozilla Firefox的扩展，支持TiddlyWiki 将更改直接保存到文件系统。

Todo.html：一个HTML文件，用于保存对自身的编辑。目前，它仅适用于Internet Explorer，您必须在首次打开文件时确认一些安全对话框。（source code）（functional demo）。

确认todo.html的步骤实际上将更改保存在本地：

将todo.html保存到本地硬盘
使用Internet Explorer打开。接受所有安全对话框。
键入命令todo add TEST（todo.html模拟todo.txt-CLI的命令行界面）
检查todo.html文件以添加＆＃39; TEST＆＃39;

警告：没有跨平台的方法。我不确定这些方法会存在多久。当我第一次启动我的todo.html项目时，有一个名为twFile的jQuery插件允许使用四种不同的方法（ActiveX，Mozilla XUL，Java applet，Java Live Connect）跨浏览器加载/保存本地文件。除ActiveX外，由于安全问题，浏览器不允许使用所有这些方法。

Answer 10

使用jsPDF-> https://github.com/MrRio/jsPDF

<div id="content">
     <h3>Hello, this is a H3 tag</h3>
    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript

  var doc = new jsPDF();
  var specialElementHandlers = {
      '#editor': function (element, renderer) {
          return true;
      }
  };

  $('#cmd').click(function () {
      doc.fromHTML($('#content').html(), 15, 15, {
          'width': 170,
              'elementHandlers': specialElementHandlers
      });
      doc.save('sample-file.pdf');
  });

使用Javascript在本地保存HTML

10 个答案: