继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

localStorage存储对象,sessionStorage存储数组对象

jokerW
关注TA
已关注
手记 25
粉丝 6
获赞 44

最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面。但随即出现的问题是,之前用户操作的样式都会被重置掉。

例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中。

想着将所有选中商品的独有Id存入数组,利用localStorage存储,每次刷新都取到存储的数组,将数组对应Id的商品再次勾上。结果出现了下面的问题:

var a = [1,2,3];
window.localStorage.setItem('key',a);var b = window.localStorage.getItem('key');
console.log(b,typeof b);//1,2,3   string

很明显,数组存进去直接被强转为了字符串类型,这明显不是我想要的,查了下,可以利用json.stringify与JSON.parse的转换达到目的。

存储数组

json.stringify可以将对象转换为 JSON 字符串

JSON.parse可以将 JSON 字符串转换为对象

那我们存的时候先将数组转成JSON字符串,取出来再转成数组就可以了,实现如下。


function storageObj(obj) {    var checkedIdStr = JSON.stringify(obj);
    sessionStorage.setItem("key", checkedIdStr);
};var arrBefor = [1,2,3];
storageObj(arrBefor);var arrAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(arrAfter,typeof arrAfter);//[1, 2, 3]  "object"


存储对象


function storageObj(obj) {    var checkedIdStr = JSON.stringify(obj);
    sessionStorage.setItem("key", checkedIdStr);
};var objBefor = {
    a:1,
    b:2};
storageObj(objBefor);var objAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(objAfter,typeof objAfter);//{a: 1, b: 2} "object"


本文转自:https://www.cnblogs.com/echolun/p/9088189.html


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP