可直接用 localstorage.setitem() 存 base64 字符串，无需额外编码；需保留 filereader 生成的 data url 前缀以便 img 直接使用，存储前可提取纯 base64，读取时需拼回前缀；注意容量限制、跨窗口不同步及非加密性。
可以直接用 localStorage.setItem() 把 Base64 字符串存进去，不需要额外编码或转换——Base64 本身是纯文本，完全兼容 localStorage 的字符串存储机制。
1. 获取头像并转成 Base64
通常从 <input type="file"> 读取图片文件，用 FileReader 转为 Base64：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = function() {
const base64String = reader.result; // 例如 "data:image/png;base64,iVBORw0KGgo..."
localStorage.setItem('userAvatar', base64String);
};
reader.readAsDataURL(file);
});
2. 存储时注意数据前缀保留
FileReader 生成的 result 是完整 Data URL（含 data:image/xxx;base64, 前缀），这个前缀必须保留，否则后续无法直接用在 <img src> 中。不要手动截掉或替换它。
如果只想存纯 Base64 内容（不含前缀），可提取：
const pureBase64 = base64String.split(',')[1]; // 取逗号后部分
localStorage.setItem('userAvatarPure', pureBase64);
但还原使用时需手动拼回前缀："data:image/png;base64," + pureBase64。
3. 读取并显示头像
从 localStorage 取出后，直接赋值给 <img> 的 src 属性即可：
const savedAvatar = localStorage.getItem('userAvatar');
if (savedAvatar) {
document.getElementById('avatarImg').src = savedAvatar;
}
建议加个简单校验，避免空值或非法字符串导致图片加载失败：
- 检查返回值是否为非空字符串
- 可正则判断是否以
data:image/开头 - 设置
img的onerror回调做兜底（如显示默认头像）
4. 注意事项与限制
LocalStorage 单域名容量一般为 5–10MB（浏览器而异），但 Base64 图片体积比原图大约 33%，一张 2MB 的 PNG 转 Base64 后约 2.7MB。头像通常较小（100×100 像素、几 KB），基本无压力。
其他要点：
- 不支持跨窗口实时同步：修改后其他已打开页面不会自动更新，需监听
storage事件手动刷新 - 敏感信息勿存：Base64 不是加密，只是编码，头像本身无敏感性，但避免混存 token 等
- 清除缓存时会丢失：用户手动清除网站数据或调用
localStorage.removeItem('userAvatar')会删除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
