Question

我正在寻找一种保存文本区域状态的方法。现在，如果我单击保存按钮，我将获得HTML，而不会在文本区域中进行更改。有没有办法保存html文件并将注释插入文本区域？

所以基本上用户在本地获取一个简单的html文件，他在浏览器中打开它并对左侧的表行进行注释。完成后，他点击保存按钮，保存文件，以便其他人可以阅读他的评论。

<html>
<body>
<script type='text/javascript'>

function saveTextAsFile()
{


var textToWrite = document.getElementsByTagName('html')[0].innerHTML
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = "CommentedLog.html"

    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();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
</script>
<input type="button" value="save" onclick="saveTextAsFile()">
<table>
<tr><td>Test</td><td>Test2</td><td><textarea>Insert comment here...</textarea></td></tr>
<tr><td>Test</td><td>Test2</td><td><textarea>Insert comment here...</textarea></td></tr>
</table>
</body>

</html>

将动态创建要评论的行数。

Answer 1

只需在功能开头添加：

var textareas=document.getElementsByTagName('textarea');
    textareas[0].textContent=textareas[0].value;

这些说明将更新textarea内容

Answer 2

由于浏览器安全策略，不能通过客户端JS执行此操作 - 网页上的JS代码无法访问文件系统。这意味着您无法修改和保存磁盘上文件的更改。

另一方面，您可以创建简单的Web服务器，您将在其中发送整个页面的HTML（带注释）。服务器将在文件系统上更新您的HTML文件。

保存html textarea状态

2 个答案: