JavaScript读写LocalStorage的base64图片时读取返回null如何处理？

• 核心是FileReader的文件读取操作是异步执行的：localStorage.setItem的写入逻辑放在reader.onload回调中，只有文件读取完成后才会触发执行。如果在调用savePic后立刻调用getPic，此时写入操作还未执行，profilePic键不存在，返回结果自然为null。
• 额外排查点：如果后续替换为存储真实base64格式图片，要注意LocalStorage单域名默认存储上限为5MB，超出大小的内容会写入失败，读取时也会返回null。

方案1：回调函数实现时序控制 #

改写savePic支持传入回调函数，写入完成后再执行读取等后续逻辑：

// 改写savePic，写入完成后触发传入的回调
function savePic (files, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(files[0]);

    reader.onload = function () {
        // 存储真实base64内容，替换掉测试字符串
        localStorage.setItem("profilePic", reader.result);
        console.log("已写入LocalStorage");
        // 写入完成后执行回调
        if (typeof callback === 'function') callback();
    };
    reader.onerror = function (error) {
        console.log('读取文件错误: ', error);
    };   
}

function getPic(){
    return localStorage.getItem("profilePic");
}

// 调用示例：写入完成后再执行读取操作
savePic(fileInput.files, function() {
    const myPic = getPic();
    console.log('读取结果：', myPic);
})

方案2：Promise封装适配async/await #

用Promise封装异步逻辑，写法更简洁易维护：

// 用Promise封装savePic
function savePic (files) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);

        reader.onload = function () {
            localStorage.setItem("profilePic", reader.result);
            resolve();
        };
        reader.onerror = function (error) {
            reject(error);
        };   
    })
}

function getPic(){
    return localStorage.getItem("profilePic");
}

// 调用示例
async function processPic() {
    try {
        // 等待写入完成再执行读取
        await savePic(fileInput.files);
        const myPic = getPic();
        console.log('读取结果：', myPic);
    } catch (err) {
        console.log('存储失败：', err);
    }
}

存储base64图片前可先判断字符串大小，避免超过LocalStorage存储上限导致写入失败。如果需要存储更大的图片资源，建议使用IndexedDB替代LocalStorage。

内容的提问来源于stack exchange，提问作者Ante346