如何使用按钮将 JSON 文件导入 Localstorage？

Question

我正在做一个个人项目，它是一个 html table 我使用 localstorage 离线（无服务器）只是 html/css/js(bootstrap,jquery).我已经成功地将本地存储导出到 json 文件。我希望能够导入此文件并使用此 json 文件重新填充 table 上的数据。

我已经能够通过

的控制台完成此操作

出口

copy(JSON.stringify(JSON.stringify(localStorage)));

导入

var data = JSON.parse(/*paste stringified JSON from clipboard*/);
Object.keys(data).forEach(function (k) {
  localStorage.setItem(k, data[k]);
});

但是就像我说的那样，我希望能够通过前端的 JavaScript 来完成此操作。

我可以用

加载文件

<label for="inputId">json import</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

然而，从这里开始我就卡住了，我最初假设浏览器 (mozilla) 会解析 json 并填充适当的值，但事实并非如此。我正在寻求从这里开始的步骤的帮助，即如何加载我的 json 文件并将其解析回本地存储，我不在服务器环境中只是运行索引 html 与一些css 和 js (bootstrap,jquery)。感谢任何帮助。

Answer 1

我想知道你想要的是用输入导入json数据吗？

        document.querySelector('.sbm').addEventListener('click', () => {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                lssave(parsedJSON);                 
            }
            fileReader.readAsText(document.querySelector('.file').files[0]);
            
        }) 
function lssave(json) {
    console.log(json)

}

   <input type="file" class="file">
    <button class="sbm">Submit</button>

如何使用按钮将 JSON 文件导入 Localstorage？

How to import a JSON file into Localstorage with a button?

javascript

import

jquery

json