前端sessionStorage存取json数据

2 篇文章 0 订阅
2 篇文章 0 订阅

最近在写web前端的时候,我遇到的问题是这样的,用Ajax接收到json数据,我想用sessionStorage在前端进行存储,以便我可以在其他页面进行使用。
如果使用Ajax接收JSON对象,建议Ajax接收的数据格式设置为‘text’
即"dataType":“text”

$.ajax({
				"url":"/WangYiYun/SelectUserSongListOfUserId?userId="+userId,
				"type":"POST",
				"data":{},
				"async" : true,
				"dataType":"text",
				"success":function(data){
					sessionStorage.setItem("allSongListJSON",data);
					window.main.location.href = "MyMusicIframe.jsp";
				},
				"error":function(err){
					alert("出现异常");
				}
			})

在Ajax接收到的数据是以原格式接收的,也可以正常输出,但使用sessionStorage进行存取
时我发现使用sessionStorage存储数据存取数据时,会自动把其他类型的数据转成字符串,这就要求在其他页面接收的时候转换成json格式,才能够进行读取json中的数据。
Ajax接收到的后端传递过来的数据形式用字符串输出格式为下面这样:

   var  data =  [{"userCreateSongList":
 	   [
 	    {"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":1,"songListName":"喜欢的","songListStateId":0,"tags":"流行 摇滚 乡村","typeId":1,"userId":1},
 	    {"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":2,"songListName":"喜欢的","songListStateId":0,"tags":"流行 摇滚 乡村","typeId":1,"userId":1}
 	    ],
 	  "userCollection":
 	    [
 	      {"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":20,"songListName":"UI哦","songListStateId":0,"tags":"流行 乡村","typeId":1,"userId":1},
 	      {"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":21,"songListName":"德仁堂","songListStateId":0,"tags":"流行","typeId":1,"userId":1}
 	    ]
 	}]

整体接收过来的数据有点复杂,整体最外层是一个数组,数组中是一个JSON对象,里面有两个key,‘userCreateSongList’与‘userCollection’,这两个key对应的值又分别是一个数组,数组中存储的值是JSON对象,里面就是键值对。
当我使用sessionStorage进行接收数据

var dataStr = sessionStorage.getItem('dataSession');

接收到的数据并不是一个数组,而是一个长字符串,这就没办法用数组遍历来进行JSON数据输出,这就要求先把“数组样式 ”的字符串转换成数组:
这里使用js中的eval()方法进行转换:

var dataArr= eval("(" + dataStr + ")");

直接把数组样式的字符串转换成了数组
然后就可以直接遍历数组,来取其中的JSON数据即可

for(var i = 0; i < dataArr.length; i++){
		var dataArrJSON = dataArr[i].userCreateSongList;//key为userCreateSongList的JSON数组
		var dataArrJSONLength = dataArrJSON.length;
		for(var j = 0; j < dataArrJSONLength ; j++){//遍历key为userCreateSongList的JSON数组
			var tags = dataArrJSON [j].tags;//获取json值
			var accessCount = dataArrJSON [j].accessCount;
		}
	}
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值