时间戳

首页 > 解决方案 > Javascript 导出本地存储

javascript - Javascript 导出本地存储

问题描述

我在一个网站上有这段代码，它将本地存储的内容导出到 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 >

标签： javascriptjsondownloadexportlocal-storage

解决方案

在这里，您需要将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>

推荐阅读