JS localStorage存储对象,sessionStorage存储数组对象操作示例


Posted in Javascript onFebruary 15, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
You might like
openPNE常用方法分享
2011/11/29 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
javascript数组去重小结
2016/03/07 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
vue二级路由设置方法
2018/02/09 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
详解JS预解析原理
2020/06/16 Javascript
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
高中军训广播稿
2014/01/14 职场文书
2014年端午节活动方案
2014/03/11 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫