时间戳

首页 > 解决方案 > 如何使用按钮将 JSON 文件导入 Localstorage？

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

问题描述

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

我已经能够通过控制台完成此操作

出口

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文件并将其解析回localstorage，我不在服务器环境中，只是运行带有一些css和js（bootstrap，jquery）的索引html。任何帮助表示赞赏。

标签： javascriptjqueryjsonimport

解决方案

我想知道您是否想要通过输入导入 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>

推荐阅读