討論一下，從長遠來看，即使我們有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請求定義到服務器，而是直接在客戶端上啟用網站之間的交互。我們應該能夠發現用戶使用的網站的服務和功能，并與他們無縫地進行交互，同時確保主機平臺的成語可用于網絡上的所有內容。

我擔心的是，從長遠來看，即使我們擁有網址，我們也會有一個網絡，可以很容易地將數據存入沙箱，但不可能直接進入主機系統，甚至不能進入到其他網站網頁。

舉報/反饋

總結

以上是生活随笔為你收集整理的如何将网站数据导入服务器里,网站是无意识的将数据导入和导出Web客户端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。