从localStorage提取Base64图片并显示最后添加项的实现

背景 #

此前已完成localStorage变量存在性判断，本次需求是从localStorage中读取Base64格式的图片并展示在img标签内。localStorage中存储的是包含picSrc字段的对象数组，实现过程经历了以下几个阶段：

HTML结构 #

用于展示图片的img标签：

<img id="logoholder" src="" alt="Logo" class="logoclient"/>

初始实现（显示异常） #

直接将localStorage获取到的内容赋值给img的src属性，导致显示异常——因为获取到的是未解析的JSON字符串，并非有效的图片地址：

var logoDataImage = localStorage.getItem("f7Logos");
logoImg = document.getElementById("logoholder");
logoImg.src = logoDataImage;

读取数组首个对象的图片 #

通过JSON.parse()解析localStorage中的JSON字符串，获取数组后读取第一个对象的picSrc字段，实现了图片正常显示，但不符合“获取最后添加的图片”的需求：

var logoDataImage = JSON.parse(localStorage.getItem("f7Logos"));
logoImg = document.getElementById("logoholder");
logoImg.src = logoDataImage['0'].picSrc;

读取数组最后添加的图片 #

使用数组的slice(-1)方法获取数组的最后一个元素（返回长度为1的新数组），再取出其中对象的picSrc字段，满足获取最后添加图片的需求：

var logoDataImage = JSON.parse(localStorage.getItem("f7Logos"));
logoImg = document.getElementById("logoimg");
logoImg.src = logoDataImage.slice(-1)["0"].picSrc;

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