Html5中localStorage储存JSON数据信息并载入JSON数据信

日期:2021-01-19 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

localStorage是HTML5出示的再顾客端完成当地储存的1种方式,可是localStorage方式只能储存标识符串数据信息,有时大家必须储存目标到当地例如:JSON;那末,localStorage如何才可以完成JSON数据信息的储存与载入呢?

思路:既然localStorage只能储存标识符串数据信息,那末大家便可以先把JSON目标变换成标识符串,随后用localStorage方式储存起来;直到必须用到这些JSON数据信息时,先把它们载入出来,随后再变换成JSON目标加以运用。

实际编码以下:

var jsonData = {'name': '张3', 'age': 29}; // 界定1个JSON目标
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 储存标识符串数据信息到当地
var getLocalData = localStorage.getItem('localData'); // 载入标识符串数据信息
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 29

拓展:

stringify()用于从1个目标分析出标识符串;

parse()用于从1个标识符串中分析出json目标。

以上所述是网编给大伙儿详细介绍的Html5中localStorage储存JSON数据信息并载入JSON数据信息的完成方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!