LocalStorage数据导出到文件

在浏览器控制台中导出数据：
打开开发者工具（F12），切换到控制台（Console），输入以下代码：

var data = JSON.stringify(localStorage);
var blob = new Blob([data], { type: "application/json" });
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "localstorage-data.json"; // 文件名
a.click();

这段代码会创建一个名为 localstorage-data.json 的文件并下载到您的计算机上。您可以选择更改文件名。

从文件导入数据到LocalStorage

1. 1. 打开目标网页：
   访问您想要导入数据的网页，并再次打开开发者工具（F12）。
2. 2. 读取文件并导入数据：
   在控制台（Console）中，输入以下代码：

function importLocalStorage(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var data = JSON.parse(event.target.result); // 解析文件内容
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                localStorage.setItem(key, data[key]); // 将数据设置到 LocalStorage
            }
        }
    };
    reader.readAsText(file);
}

1. 3. 选择文件：
   在控制台中运行以下代码，以便选择文件并调用 importLocalStorage 函数：

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json'; // 限制文件类型为 JSON
fileInput.onchange = function(event) {
    var file = event.target.files[0];
    if (file) {
        importLocalStorage(file);
    }
};
fileInput.click(); // 弹出文件选择窗口

这段代码会弹出文件选择对话框，您可以选择之前下载的 localstorage-data.json 文件。
4. 验证导入：
导入完成后，您可以通过再次查看 LocalStorage 来验证是否成功导入数据。打开开发者工具，切换到“应用程序”标签，然后在“本地存储”下查看相应的域名。

总结

以上步骤展示了如何将 LocalStorage 数据导出到文件以及从文件中导入数据。这种方法对于备份和恢复数据非常方便。请根据您的需求进行必要的调整和测试。