JS localStorage与sessionStorage存储对象及数组的方法

本文通过具体示例，讲解在JavaScript中如何使用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

从输出结果可以看出，数组存入localStorage后直接被强制转换为了字符串类型，这并非预期结果。经过查阅资料，发现可以通过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程序设计内容能对大家有所帮助。