讨论一下，从长远来看，即使我们有URL，我们也会有一个web，在这个web中，很容易将数据放入沙箱中，但不可能将其取出。
网络作为一个开放的互操作平台改变了世界。它使我们能够通过一组开放的技术(如API)查看，交互和交换信息; 特别是Link，HTTP和HTML。借助这些简单的工具，我们可以创建可在服务器到服务器之间以及从服务器到使用浏览器的用户之间互操作的复杂应用程序和服务。
一旦网站被加载到用户的浏览器中，用户生成并存储在浏览器中的数据就会被锁定，除非它被推回到服务器上，我认为这是网络隐藏的问题。
Web Intents是一项技术，旨在确保客户端的网站能够立即与世界进行互操作：用户正在其设备上与其他网站和应用进行交互。Web Intents是一个死路一条，但问题仍然存在，我们无意中创建了锁定在用户登录和本地数据存储区之后的孤岛。
我仍然热衷于在客户端完全从Web应用程序中获取数据，并且我们有许多工具可供使用，但是让我告诉你，我们很难做到这一点。
我喜欢这样一个事实，即用户浏览器中的每个网站都是自己的安全沙箱，但我希望在网络上看到的一件事是在如何从用户系统获取数据到沙箱中的界面上进行一步改变，通过定义的接口，将数据从沙箱中拖回到用户系统中。
我在看到iOS 11支持网络上的拖放API并在观看我的好朋友和同事Sam Thorogood的Drag and Drop的帖子(查看它)之后开始阅读本文，我想更深入地探索这个空间。
介绍拖放
在某些情况下，我想要构建一个类似于刮板和粘贴bin的应用程序，也就是说，您可以将任何内容放到网页上，然后在稍后的日期将其恢复出来，这篇文章记录了一些我一路上发现的问题。
有很多方法可以将数据从主机操作系统获取到网站的沙箱中，并且有多种方法可以将数据托管并生成回主机系统。问题在于它在所有平台上都非常笨重和不一致，这使得它非常令人沮丧。
让我们从从客户端设备获取数据到网站的方式开始：
从剪贴板粘贴用户粘贴手势。从浏览器外部拖动。从主机打开一个网页。
从网站获取数据返回到客户端：
以用户复制手势将数据添加到剪贴板。从浏览器拖到客户端。
通过Picker上传
我不会涉及太多的细节，但作为一个简单的文件选择器非常好。
您可以将选取器限制为文件类型。
您可以让用户选择多个文件。
您还可以与自定义拾取器(如相机)集成。
该元素甚至有一个界面，允许您检查所选文件。如果用户选择文件，将文件放入浏览器的沙箱非常容易。
问题1：一旦你有了这个文件，你不能将任何改变保存回主机上的同一个文件。实际上，您正在处理文件的副本。
问题2：如果主持人在持有副本的同时更新文件，则不会看到更新。
将文件下载到主机操作系统
我们可以通过简单地使用如下download属性来下载远程资源：
Download
。
我们也可以在客户端动态生成内容，并将其下载到主机，如下所示：
function download() {var url = URL.createObjectURL(new Blob([‘hello world at ‘, Date.now()], {‘type’: ‘text/plain’}));var a = document.createElement(‘a’);document.body.appendChild(a);a.style = ‘display: none’;a.href = url;a.download = ‘hello.txt’;a.click();URL.revokeObjectURL(url);}download();
它简单而有效，现在也在Safari中获得支持。
问题1：没有能力与系统的“另存为”集成，这意味着用户无法选择文件将放置在浏览器下载目录之外的位置。
问题2：无法在文件下载和用户设备上回写文件; 一旦它被下载，它就消失了。
使用剪贴板将数据粘贴到网页中
拦截onpaste页面上的用户调用系统粘贴手势时触发的事件，然后执行一些魔法。
document.body.addEventListener(“paste”, function(e) {// You need to own it.e.preventDefault();// get all the types of things on the clipboardlet types = e.clipboardData.types;// Get the text on the clipboarde.clipboardData.getData(“text/plain”);// Get a itterable list of items (Not on Safari)e.clipboardData.items// Get access to a file on the clipboarde.clipboardData.files[0]});
这个API在多个浏览器中似乎相对一致(除了.items外)
广泛而言，为了将数据导入您的网络应用程序，此API运行良好。您可以访问剪贴板上的文件和文本，并使用它，并且这是安全的，因为用户必须启动系统粘贴操作才能访问此数据。人们不知道一个网站是否可以监听粘贴事件并读取用户从未想过会读取的数据……
问题1：调试很痛苦，控制台日志记录clipboardData不会显示正确的数据，你必须断点。
使用剪贴板从Web页面复制自定义数据
它可以拦截oncut和oncopy被触发的事件时，页面上的用户调用系统复制和剪切的手势，然后添加自己的定制内容到系统剪贴板。
document.body.addEventListener(“copy”, function(e) {// You need to own it.e.preventDefault();// Set some custom data one.clipboardData.setData(“text/plain”, “Hello World”);// Add a user generated file to the clipboarde.clipboardData.items.add(new File([“Hello World”], “test.txt”, {type: “text/plain”}));});
乍一看，这是惊人的，我应该能够得到我需要的任何东西到剪贴板，但是，有一些问题。
问题1：将文件添加到剪贴板是不可能的。
document.body.addEventListener(“copy”, function(e) {// You need to own it.e.preventDefault();// Add a user generated file to the clipboarde.clipboardData.items.add(new File([“Hello World”], “test.txt”, {type: “text/plain”}));});
该API存在，但它似乎无法在任何地方工作。如果尝试粘贴到将数据添加到clipboardData对象的同一页面上，则该clipboardData.files属性为空。如果您尝试将结果粘贴到文件系统，则什么也不会发生。但是，如果粘贴到文本字段，则会粘贴文件名。我无法分辨这是否是安全功能，但它没有以任何方式记录 – 如果是这种情况，我质疑API的整个存在。
问题2：您希望在事件中同步执行所有剪贴板操作，这意味着无法将数据添加到存储在索引数据库中的剪贴板中。
document.body.addEventListener(“copy”, function(e) {// You need to own it.e.preventDefault();// Add a user generated file to the clipboard (Promise)getData.then(file => e.clipboardData.items.add(file));});
看起来你必须在与事件相同的刻度上改变剪贴板，这严重限制了API的功能。
从主机拖到网页中
拖放式API与剪贴板事件API有许多共同之处，因此理论上讲，它的入门并不复杂。
要从主机环境中引入数据，您必须管理丢弃事件。首先，确保您覆盖浏览器的默认操作(即显示文件)，然后您可以访问该事件中的数据。
就像剪贴板一样items，你也files可以看到所有从主机拖到页面上的东西。
element.addEventListener(‘drop’, e => {// Own it. nuff said.e.preventDefault();// Get the text on the clipboarde.dataTransfer.getData(“text/plain”);// Get a itterable list of items (Not on Safari)e.dataTransfer.items// Get access to a file on the clipboarde.dataTransfer.files[0]});
实际上这一切似乎相当不错。
从Web页面拖到主机
拖放式API与剪贴板事件API有许多共同之处，因此理论上讲，它的入门并不复杂。
有一个非标准的“哑剧式”叫DownloadURL。这似乎在Firefox或iOS中不受支持，但在Chrome中受支持。您向浏览器提供要获取的URL，并且一旦将其拖出浏览器，它就会启动下载。
element.addEventListener(‘dragstart’, e => {// Own it. nuff said.e.preventDefault();e.dataTransfer.dropEffect = “copy”;e.dataTransfer.effectAllowed = “all”;e.dataTransfer.setData(“DownloadURL”, `image/png:test.png:${$fileURL.href}`)});
这是将文件从浏览器拖出到用户主机操作系统的唯一已知方式。
问题1：DownloadURL完全不符合标准，仅适用于Chrome。
问题2：DownloadURL似乎不适用于Blob网址; 这意味着在浏览器中创建的文件不能被拖出。
问题3：通过管理的请求DownloadURL不被服务工作者处理。
问题4：dataTransfer有一个files非常类似于对象的对象clipboardData，和clipboardData界面非常相似，向其添加文件对拖动操作没有任何作用。
问题5：再一次，很像clipboardDataAPI，你必须dataTransfer在事件中同步地改变对象。这使得不可能与异步数据存储进行交互。
我希望看到的Web平台的变化
我认为我们可以对Web平台进行一些根本性的改变，以使数据在客户端的Web应用程序中进出数据变得更简单和容易。
标准化DownloadURL拖放
这似乎是一个合理的事情。对于网络上任何地方的设计，字面上都没有任何引用，规范列表中的任何引用似乎都已经失去了时间。
感觉浏览器管理的方式与DownloadURL今天的方式类似，因此可能是一个好的开始。
允许将文件添加到剪贴板并拖放操作
我假设有一个原因，它不能在任何地方工作，但我希望能够dataTransfer.files.add([File])和为此是剪贴板上的东西，并在用户手势完成时丢弃。
使事件与异步操作一起正常工作的DOM事件
在浏览器中有很多事件可以让你改变默认动作，然后改变事件的某些状态(见上)。看起来，这些事件上保存的数据只能在事件执行时被改变，而不能作为由事件创建的异步操作的结果。
我很想看到这些事件的使用，ExtendableEvent以便我们可以访问waitUntil(或类似的东西)。当网络转向数据存储操作的asnyc时，感觉就像我们与事件接口的方式一样。
引入持久性文件API
我们没有一种理解文件引用的方法，并保留该引用以便可以轻松操作。我们可以在我们的“web应用程序”的上下文中执行此操作 – 将文件保存到IndexedDB并不太复杂 – 但我们正在将应用程序中的所有数据全部放在应用程序中，而不允许它们轻松地与其周围的主机连接。
长时间的比赛
目前浏览器生态系统正在发生一系列的发展，一方面，我们拥有适应性和本土平等的竞争，另一方面我们有内容保真度的运动 – 引入API，如Grid，字体和性能工具，以确保我们能够快速，高质量地提供内容。
我今天谈到的很多内容看起来都是“让网络成为应用程序平台”的焦点，而且它肯定是故事的一部分。如果我们想要与本地体验相匹配，那么浏览器和浏览器中的网站应该像它们属于系统一样行事。但我认为还有更多。
我希望看到一个网站，网站之间的互联不仅仅是通过链接和HTTP请求定义到服务器，而是直接在客户端上启用网站之间的交互。我们应该能够发现用户使用的网站的服务和功能，并与他们无缝地进行交互，同时确保主机平台的成语可用于网络上的所有内容。
我担心的是，从长远来看，即使我们拥有网址，我们也会有一个网络，可以很容易地将数据存入沙箱，但不可能直接进入主机系统，甚至不能进入到其他网站网页。
举报/反馈