JS localStorage存储对象,sessionStorage存储数组对象操作示例
本文实例讲述了JSlocalStorage存储对象,sessionStorage存储数组对象操作。分享给大家供大家参考,具体如下:
一、前言
最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面。但随即出现的问题是,之前用户操作的样式都会被重置掉。
例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中。
想着将所有选中商品的独有Id存入数组,利用localStorage存储,每次刷新都取到存储的数组,将数组对应Id的商品再次勾上。结果出现了下面的问题:
vara=[1,2,3]; window.localStorage.setItem('key',a); varb=window.localStorage.getItem('key'); console.log(b,typeofb);//1,2,3string
很明显,数组存进去直接被强转为了字符串类型,这明显不是我想要的,查了下,可以利用json.stringify与JSON.parse的转换达到目的。
二、存储数组
json.stringify可以将对象转换为JSON字符串
JSON.parse可以将JSON字符串转换为对象
那我们存的时候先将数组转成JSON字符串,取出来再转成数组就可以了,实现如下。
functionstorageObj(obj){ varcheckedIdStr=JSON.stringify(obj); sessionStorage.setItem("key",checkedIdStr); }; vararrBefor=[1,2,3]; storageObj(arrBefor); vararrAfter=JSON.parse(sessionStorage.getItem("key")); console.log(arrAfter,typeofarrAfter);//[1,2,3]"object"
三、存储对象
functionstorageObj(obj){ varcheckedIdStr=JSON.stringify(obj); sessionStorage.setItem("key",checkedIdStr); }; varobjBefor={ a:1, b:2 }; storageObj(objBefor); varobjAfter=JSON.parse(sessionStorage.getItem("key")); console.log(objAfter,typeofobjAfter);//{a:1,b:2}"object"
利用JSON转换值达到存储的的方式非常好用,除此之外JSON的方法还能用于深拷贝
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。