JS localStorage存储对象，sessionStorage存储数组对象操作示例
本文实例讲述了JS localStorage存储对象，sessionStorage存储数组对象操作。分享给大家供大家参考，具体如下：
一、前言
最近在用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"
利用JSON转换值达到存储的的方式非常好用，除此之外JSON的方法还能用于深拷贝
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了bootstrap suggest js下拉框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
火狐也不知道为什么，自己功能上，样式上面，都无法让其强制换行，这里用JS来实现火狐里面强制换行的方法。2010-06-06
这篇文章主要介绍了JS中超越现实的匿名函数用法,结合实例形式分析了javascript匿名函数定义、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
本文给大家分享使用for循环实现js生成简单的等差数列，具体实现方法，大家参考下本文2017-11-11
这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了js实现右键菜单功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了js实现提交前对列表数据的增删改查，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了纯js代码实现简单计算器，功能超简单，实现加减乘除简单运算，感兴趣的小伙伴们可以参考一下2015-12-12
JS中原型的概念不想多说，这里只是探讨一下修改父类原型属性与覆盖父类原型中属性的区别，防止以后出问题2012-07-07
最新评论