如何将localStorage存储对象和sessionStorage存储数组对象操作改写成长尾？

本文共计736个文字，预计阅读时间需要3分钟。

原文：本文实例讲述了JS+localStorage存储对象，sessionStorage存储数组对象操作。分享给广大大家供大家参考，具体如下：

一、前言最近在用angular做商城购物车的功能模块，因为angular的watch监听，导致数组的操作出现了一些问题。

二、localStorage存储对象localStorage可以用来存储对象，通过JSON字符串化对象，然后存储。

javascript// 存储对象var obj={name: '张三', age: 30};localStorage.setItem('user', JSON.stringify(obj));

// 获取对象var user=JSON.parse(localStorage.getItem('user'));console.log(user.name); // 输出：张三

三、sessionStorage存储数组对象操作sessionStorage与localStorage类似，但它的数据只在当前会话中有效，关闭浏览器后数据会丢失。

javascript// 存储数组var arr=[{name: '李四', age: 25}, {name: '王五', age: 28}];sessionStorage.setItem('users', JSON.stringify(arr));

// 获取数组var users=JSON.parse(sessionStorage.getItem('users'));console.log(users[0].name); // 输出：李四

四、总结以上就是关于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代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。