How to export content in Chrome's local storage for a website

LocalStorageExport.md

Original idea is from this post

1. Open a tab and navigate to the website where you have content to export.

2. Open devtools and switch to the console tab.

3. Copy and paste the following snippet in the console and Chrome should ask you to save the output file

var obj = JSON.stringify(localStorage, null, 4)
var vLink = document.createElement('a')
vBlob = new Blob([obj], {type: "octet/stream"})
vUrl = window.webkitURL.createObjectURL(vBlob);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vUrl.split('/')[2] + '-export.json'); // give you the website name + "export.json"
vLink.click();

4. Profit!

Thanks for the code! But for those who are looking to import the JSON back with a file selector, here is the code to load the JSON back to local storage which will overwrite the localStorage on the current website,

function loadLocalStorageFromFile() {
    var fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '.json';  // only JSON files

    fileInput.click();

    fileInput.addEventListener('change', function(event) {
        var file = event.target.files[0];

        if (file) {
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function(e) {
                try {
                    var jsonData = JSON.parse(e.target.result);  // Parse the file content

                    // Iterate over all keys in the parsed JSON and set them in localStorage
                    for (var key in jsonData) {
                        if (jsonData.hasOwnProperty(key)) {
                            localStorage.setItem(key, jsonData[key]);
                        }
                    }
                    alert("LocalStorage has been updated from the JSON file.");
                } catch (err) {
                    alert("Error parsing JSON: " + err);
                }
            };

            // Handle any errors that occur during file reading
            reader.onerror = function() {
                alert("Error reading file.");
            };
        } else {
            alert("No file selected.");
        }
    });
}

loadLocalStorageFromFile();  // Triggers the file selection dialog

Hmm. Nothing happens when I put the first code in. Console just says "undefined". So I can't test the second one to put it back in. This may work but can't export to test the import. Just tried the second one, and it does create a file dialogue, so probably does work.

Hmm. Nothing happens when I put the first code in. Console just says "undefined". So I can't test the second one to put it back in. This may work but can't export to test the import. Just tried the second one, and it does create a file dialogue, so probably does work.

Are you sure no file is being downloaded? I think it is normal to see undefined as a return but a file should be downloaded. Are you using Chrome? Your browser or extensions might have blocked the automatic download.

Yeah. It was Firefox. It works in chrome. Is there a way of having the file save dialogue with this like the load one so it's possible to name the file and decide where it will be downloaded to?

Both scripts don't work in Firefox. The first one does nothing but there are no errors. The second script returns a warning that it was prevented from running because there was no user interaction in Firefox. But they both work in edge and chrome. Just need the filebsave duologue for the save script.

Yeah. It was Firefox. It works in chrome. Is there a way of having the file save dialogue with this like the load one so it's possible to name the file and decide where it will be downloaded to?

Both scripts don't work in Firefox. The first one does nothing but there are no errors. The second script returns a warning that it was prevented from running because there was no user interaction in Firefox. But they both work in edge and chrome. Just need the filebsave duologue for the save script.

For security reasons, I Don't think there is an easy way of having the file save dialogue to save the file (disclaimer: I am not an expert in javascript/browsers). You better download the file and then move it.

You can do it, but for some bizarre reason you can't call the function with a button. It has to be called with <input type "file" which gives you a file picker but then if you assign the load function to it, you get the file picker dialogue twice. It's just another weird thing that the drug addled creators of HTML and JavaScript designed to make us suffer.