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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
Js组件的一些写法
Sep 10 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
vue组件tabbar使用方法详解
Nov 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使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php遍历目录方法小结
2015/03/10 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
php封装一个异常的处理类
2017/06/08 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
文秘人员工作职责
2014/01/31 职场文书
青春无悔演讲稿
2014/05/08 职场文书
社区党建工作方案
2014/06/10 职场文书
个人借款协议书范本
2014/11/17 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
员工离职通知函
2015/04/25 职场文书
《落花生》教学反思
2016/02/16 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python