Chrome bị treo khi URI quá dài

Question

Tôi đang thực hiện một chức năng xuất khẩu sang một trò chơi HTML5 của tôi và phương pháp tiết kiệm hiện tại của tôi là một serialization thô của dữ liệu trò chơi và sau đó:

// this is Javascript 
var gameData = "abc"; // this is actually a HUGE string of over 2MB 
try 
{ 
    document.location = "data:text/octet-stream,"+encodeURIComponent(JSON.stringify(gameData)); 
} 
catch(e) 
{ 
    console.log(e); 
} 

Từ: Using HTML5/Javascript to generate and save a file

Tôi không quan tâm đến việc tôi không thể sử dụng nó cho các chuỗi lớn, nhưng tôi muốn tạo cảnh báo thông báo rằng phương pháp này không hoạt động, tiếc là Chrome (16) bị treo mà không bắt ngoại lệ .

Có cách nào tốt hơn để triển khai loại xuất này không, điều quan trọng nhất đối với tôi là làm cho nó hoạt động cục bộ. FileAPI sẽ là một giải pháp tốt hơn, nhưng không hoạt động cục bộ.

Answer 1

AFAIK không thể phía máy khách; nhưng có thể lưu tệp 1.99MB theo cách này trong Chrome; có lẽ bạn nên cố gắng nén/tối ưu hóa dữ liệu trò chơi của mình một chút. Một cách để làm điều đó là sử dụng JSZip.

Để kiểm tra nếu trình duyệt hiện nay là Google Chrome và vì vậy phương pháp này không làm việc với chuỗi dài bạn có thể sử dụng một cái gì đó như thế này:

if(gameData.length > 1999999 && window.chrome){ 
    alert("Sorry, this export method does not work in Google Chrome") 
    return; 
} 

Answer 2

Tôi giả định rằng JSON.stringify đang làm việc Nhưng rằng win.location thất bại do thực tế là URI là lớn.

Những gì bạn có thể làm là để chuyển đổi uri của bạn đến một blob, và sau đó

URL.createObjectURL(file) 

này sẽ tạo ra một url trỏ đến một đối tượng bên trong (nội bộ để trình duyệt).

Và nó sẽ hoạt động như mong đợi.

Đây là một phương pháp để chuyển đổi dataURI để Blob

function(dataURI) { 
    // convert base64 to raw binary data held in a string 
    // doesn't handle URLEncoded DataURIs 
    var byteString; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteString = atob(dataURI.split(',')[1]); 
    else 
     byteString = unescape(dataURI.split(',')[1]); 
    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    // write the bytes of the string to an ArrayBuffer 
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    // write the ArrayBuffer to a blob, and you're done 
    return new Blob([ab],{type: mimeString}); 
} 

}