0

I am working on a personal project which is an html table I use offline with localstorage (no server) just html/css/js(bootstrap,jquery). I have successfully been able to export the localstorage to a json file. I would like to be able to import this file and repopulate the data on the table with this json file.

I have been able to accomplish this through the console with

EXPORT

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

IMPORT

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

However like I stated I would like to be able to accomplish this through JavaScript on the frontend.

I am able to load the file with

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

However from here is where i am stuck, I initially assumed the browser (mozilla) would parse the json and populate the appropriate values but that was not the case. I am seeking help with steps from here on out i.e. how to load my json file and parse it back into localstorage, I am not on a server environment just running a index html with some css and js (bootstrap,jquery). Any help is appreciated.

JustNoobish619
  • 37
  • 5

1 Answers1

1

I wonder if what you wanted was to import json data with input?

        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>