网站localStorage的导入和导出

Good_Luck_Kevin2018

于 2024-04-18 15:39:58 发布

阅读量518

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Good_Luck_Kevin2018/article/details/137923850

版权

本文介绍了如何使用JavaScript操作浏览器的localStorage，包括设置、导出（生成下载链接）和导入JSON数据。通过FileReaderAPI实现文件上传和内容解析。

摘要由CSDN通过智能技术生成

存

localStorage.setItem('SET_QUERY_FORM', JSON.stringify(params))

取

const FORM = JSON.parse(localStorage.getItem('SET_QUERY_FORM'))

导出

（在console里面粘贴执行）

let data = JSON.stringify(localStorage,null, 4); // 这是你要下载的数据  
let blob = new Blob([data], {type: "text/plain;charset=utf-8"});  
let url = URL.createObjectURL(blob);  
  
let link = document.createElement('a');  
link.href = url;  
link.download = 'web_localStorage.txt'; // 你可以设置任何你想要的下载文件名  
link.click();
link.remove()

导入

（弹出文件输入框，选择导出的文件，进行导入，可事先清空localStorage以验证结果）

const fileInput = document.createElement('input');
fileInput.type = 'file';

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    if (file) {
        const reader = new FileReader();
        
        reader.onload = (event) => {
            const contents = event.target.result;
            
            // 2. 将文件内容解析为 JSON 数据并写入 localStorage
            try {
                const parsedData = JSON.parse(contents);
                Object.keys(parsedData).forEach(key => {
                    localStorage.setItem(key, parsedData[key]);
                });
                alert('导入成功！');
            } catch (error) {
                alert('导入失败：文件格式错误！');
            }
        };
        
        reader.readAsText(file);
    }
});

fileInput.click();