使用JQuery无法从LocalStorage读取存储数组并追加到DOM的问题

问题根因 #

localStorage 仅支持存储字符串类型数据，你直接将jQuery封装的DOM对象存入数组做JSON序列化时，JSON无法正确识别并序列化DOM对象的完整结构，最终序列化得到的只有无实际内容的空对象，取出后自然无法正常追加到DOM中渲染。

解决方案 #

存储阶段不要直接存jQuery生成的DOM对象，改为存储对应的HTML字符串即可，读取后可直接拼接渲染。

修正后完整代码 #

const arr = [];
// 直接存原始HTML字符串，不提前转为jQuery对象
var cartItem = `<li class='newItem'> <p class='id'>1</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>`;
var cartItem2 = `<li class='newItem'> <p class='id'>2</p> <div class='details'><p class='name'>Orange</p><span class='weight'>20</span><span> /</span> <span class='avail'>In Stock</span> <p class='price'>10</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value='1' ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>`;

arr.push(cartItem, cartItem2);
// 序列化后存入localStorage
localStorage.setItem("cartItem", JSON.stringify(arr));

// 读取并渲染
var data = localStorage.getItem("cartItem");
var updatedData = JSON.parse(data);
// 拼接所有HTML字符串后一次性追加，性能更高
$("#temp").append(updatedData.join(''));

兼容场景处理 #

如果你已经提前生成了jQuery对象，可以调用prop('outerHTML')方法获取对应的HTML字符串再存入数组：

// 已有jQuery对象时的存入方式
arr.push(cartItem.prop('outerHTML'), cartItem2.prop('outerHTML'));

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