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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jQuery事件详解
Feb 23 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
js实现翻牌小游戏
Jul 31 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
优化PHP代码的53条建议
2008/03/27 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php简单截取字符串代码示例
2016/10/19 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
原生js实现日期联动
2015/01/12 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Sanic框架流式传输操作示例
2018/07/18 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python实现根据文件格式分类
2019/10/31 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
公司会计主管岗位责任制
2014/03/01 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript