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定义函数的方法
Dec 06 Javascript
javascript string字符串优化问题
Jul 31 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
深入理解Promise.all
Aug 08 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
yii数据库的查询方法
2015/12/28 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
详解JS函数防抖
2020/06/05 Javascript
python切换hosts文件代码示例
2013/12/31 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python命令 -u参数用法解析
2019/10/24 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python celery原理及运行流程解析
2020/06/13 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
营销部内勤岗位职责
2014/04/30 职场文书
唐山大地震的观后感
2015/06/05 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python