背景:今天做ajax访问接口,接口返回一个对象集合。我希望页面在显示对象集合列表时,为每个列表增加点击事件,点击后将对象数据传入下个页面,故需要使用localStorage存放对象。
首先是回调函数中拼接表格,并为每一列增加点击事件,传参为经过JSON.stringify串化的对象
<tr onclick='getDetailList(" + JSON.stringify(dataObj[i]) +")'>
该点击事件的功能是页面跳转,在跳转之前将对象存入localStorage
function getDetailList(experiment){
alert(experiment.experiment_name);
localStorage.setItem("experiment",experiment);
window.location.href = "detailList.html";
}
执行后发现alter能正常输出
但存入localStorage的对象却无法取出,提示undefined
上网查阅结果都说是存入localStorage之前需要JSON.stringify串化,取值时需要JSON.parse转回对象。想到我在传参时已经JSON.stringify过,便在取值时加了JSON.parse,
var experiment = JSON.parse(localStorage.getItem("experiment"));
结果又报了Unexpected token o in JSON at position 1
这个报错大概率是因为JSON数据已经是对象格式,不需要再转化了。
思考了很久才想起,既然它已经是对象格式,显然不能存入localStorage,故在存入之前再进行一次串化,
function getDetailList(experiment){
alert(experiment.experiment_name);
localStorage.setItem("experiment",JSON.stringify(experiment));
window.location.href = "detailList.html";
}
问题解决,对象成功存入并取出。
总结:若遇到从localStorage取对象发现undefined时,在存之前进行一次JSON.stringify串化,取值时JSON.parse转回对象。