在前端开发中，经常需要处理图片的上传、下载和展示。本文主要介绍如何将图片保存到本地存储并在下一页中进行展示。
localStorage 存储图片
localStorage 是 HTML5 提供的一种客户端存储方式，可以将数据存储在用户的浏览器中，不会随着页面的关闭而消失。利用 localStorage 存储图片，需要将图片转换成 Base64 编码的字符串格式。
-- -------------------- ---- ------- -- ------ ------ -------- -------- ------------------- - ----- ------ - --------------------------------- ------------ - ---------- ------------- - ----------- ----- --- - ------------------------ ------------------ -- -- ---------- ------------ ----- ------- - ------------------------------ ------ ------------------------------------------------- ---- - -- - ------ ----------- ------------ - -------- ---------------------------- ------ - ------------------------- ------- -
使用 sessionStorage 管理图片
sessionStorage 也是 HTML5 的客户端存储方式，与 localStorage 不同的是，sessionStorage 只存在于当前会话（session）中，当页面被关闭后就会被清除。因此，可以使用 sessionStorage 来管理需要在当前会话中共享的图片。
-- -------------------- ---- ------- -- ------ -------------- - -------- ------------------------------ ------ - --------------------------- ------- - -- - -------------- ----- -------- ------------------------------- - ------ ---------------------------- -
图片展示
在下一页中展示图片，可以使用标签和data URI，直接将Base64编码的字符串格式作为src属性值即可。
<!-- 展示从 localStorage 中获取的图片 -->
<img src="data:image/png;base64,${localStorage.getItem('key')}">
<!-- 展示从 sessionStorage 中获取的图片 -->
<img src="data:image/png;base64,${sessionStorage.getItem('key')}">总结一下，通过将图片转换为 Base64 编码的字符串格式，并利用 localStorage 或 sessionStorage 进行存储管理，再通过标签和 data URI 进行展示，我们就可以很方便地实现将图片保存到本地存储并在下一页中进行展示的功能了。
代码示例：https://codepen.io/ChatGPT/pen/oNbWrXE
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10656
