Javascript 导出本地存储

Question

我在一个网站上有这段代码，可以将本地存储的内容导出到 JSON 格式的文件。
由于某种原因它停止工作。我在多个浏览器中测试了它，但它都是一样的...... 没有显示任何错误，但它也没有导出。
不同的变量看起来不错，但它就是不导出。
老实说，我不知道如何以不同的方式执行此操作，因此我们将不胜感激。

感谢

function exportHistory() {  
    console.log("started"); 
    var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable

    var vLink = document.getElementById('exportHistory'),
    var vBlob = new Blob([_myArray], {type: "octet/stream"}),
    vName = 'working_history_' + todayDate() + '.json',
    vUrl = window.URL.createObjectURL(vBlob);
    console.log(vLink);

    vLink.setAttribute('href', vUrl);
    vLink.setAttribute('download', vName );
    console.log("finished");    
}



<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button >

Answer 1

这里您需要将 download 属性添加到锚标记 <a> 而不是单击按钮本身。您需要使用 display:none 创建锚标记并以编程方式单击它以下载文件。这是一个例子。请注意，按钮仅用于执行函数，并且 href 和 download 属性已添加到 <a> 标签。

function exportHistory() {  
    console.log("started"); 
    var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable


    //Note: We use the anchor tag here instead button.
    var vLink = document.getElementById('exportHistoryLink');

    var vBlob = new Blob([_myArray], {type: "octet/stream"});
    vName = 'working_history_' + todayDate() + '.json';
    vUrl = window.URL.createObjectURL(vBlob);
    console.log(vLink);

    vLink.setAttribute('href', vUrl);
    vLink.setAttribute('download', vName );

    //Note: Programmatically click the link to download the file
    vLink.click();

    console.log("finished");    
}

现在向 DOM 添加一个空锚标记。

<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button > 

<a id="exportHistoryLink" style="display: none;">Export</a>

Javascript 导出本地存储

Javascript export local storage

javascript

json

export

download

local-storage