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 相关文章推荐
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP echo()函数讲解
2019/02/15 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python实现文件名批量替换和内容替换
2014/03/20 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python3 反射的四种基本方法解析
2019/08/26 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python logging添加filter教程
2019/12/24 Python
Python中logging日志库实例详解
2020/02/19 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
生产部岗位职责范文
2014/02/07 职场文书
有创意的广告词
2014/03/18 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
活动总结模板
2014/05/09 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
田径运动会通讯稿
2015/07/18 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python