【问题标题】:How do I save the text in a textarea to the users computer when they click a button in html?当用户单击html中的按钮时,如何将文本区域中的文本保存到用户计算机?
【发布时间】:2012-03-08 16:07:07
【问题描述】:

我又开始写博客了,但我想制作一个在线文本编辑器,您可以在其中单击一个按钮并将其保存到他们的计算机上,如果您单击加载按钮,它会从他们的计算机上加载一个文件。有人知道怎么做吗?

提前致谢!

【问题讨论】:

  • 浏览器工作的安全限制不允许这样做。

标签: html textarea save


【解决方案1】:

目前无法写入客户端的文件系统。这是出于安全原因。

但是,使用 JavaScript,您可以在 localStorage 对象中存储一些数据(最多 5MB),并在以后从那里检索它。 localStorage @MDN

localStorage 只能在其键值存储中存储字符串,因此您可能需要在存储对象之前对其进行序列化。

存储

window.localStorage.setItem( 'yourId', JSON.stringfy( yourData ) );

检索

var yourData = JSON.parse(  window.localStorage.getItem( 'yourId' ) );

【讨论】:

  • +1 诚然,这比我的解决方案更优雅,步骤更少,(虽然公认的潜力最大为 5 兆,但谁会编写一个 5 兆的纯文本文件?)
【解决方案2】:

我不确定为什么客户端存储有如此强大的不可能:您所要做的就是将文件导出为您想要的任何格式(甚至是纯文本)和让用户下载它——类似于另存为。要加载文件,让用户再次上传它——类似于打开

例如,这可以通过将 textarea 的内容发布到 php 脚本来完成。

这只不过是在任何其他本地文字处理应用程序中使用Save As...Open 对话框。

不过,您可能希望用户执行此操作的唯一原因是允许他们在与您的博客平台断开连接时在本地编辑文件。因此,除非您希望用户在本地实际编辑文件,否则更优雅的选择是将草稿版本保存在服务器上(就像 StackExchange 一样)。

【讨论】:

    【解决方案3】:

    加载可以像这样在表单中实现(例如发送到 PHP 脚本):

    <input name="usedFile" type="file" class="file" size="50"
           accept="text/csv,text/plain" />
    

    这允许例如加载文本和 csv 文件。

    我认为这样保存是不可能的。

    @comment
    这实际上取决于您要对文件执行的操作。这是一个简单的加载函数:

    if (!empty($_FILES['usedFile']['tmp_name'])) {
        load_uploaded_file($_FILES['usedFile']['tmp_name'], $my_loaded_data);
    }
    
    // ...
    
    function load_uploaded_file($filename, &$data) {
    
        if (!file_exists($filename)) {
            return False;
        }
    
        $data = array();
        $rowCount = 0;
        $handle = fopen($filename, 'r');
    
        while (($line = fgets($handle, 4096)) !== False) {
            $data[$rowCount] = $line;
            $rowCount++;
        }
    
        fclose($handle);  
        return True;
    }
    

    【讨论】:

    • @EandCProducts 我没有实现整个功能。我添加了一个简单的加载功能。你必须做断言或某事。否则你自己并为你的 html 元素设置文本。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-10-23
    • 1970-01-01
    • 2012-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多