localStorage存储对象,sessionStorage存储数组对象
2023-09-11 14:16:38 时间
一、前言
最近在用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的方法还能用于深拷贝,有兴趣可以看看博主这篇文章。
大概记录这么多了,谢谢阅读。
相关文章
- php 腾讯云 对象存储V5版本 获取返回的上传文件的链接方法
- 华为云实战 之 对象存储的使用以及与腾讯云COS对比
- 弹性文件服务解密 -- 块存储、文件存储、对象存储的区别
- 信息是如何表示和存储的
- DT添加七牛云对象存储插件功能
- sql serve存储过程
- 使用NSHashTable存储引用对象
- 对象存储在什么地方(java编程思想)
- 干到底--三种存储类型比较-文件、块、对象存储
- 集群中的session共享存储 实现会话保持
- 【收藏】K8S部署minio对象存储
- Atitit index threod type 索引原理与类型 种类 目录 1.1. 每个文档在经过底层的存储引擎持久化后1 2. MongoDB索引类型2 2.1. 包括单字段索引、复合索引
- java操作阿里云的对象存储OSS
- 清明节特辑 |记忆存储、声音还原、性格模仿……AI可以让人类永生吗?
- 从两个模型带你了解DAOS 分布式异步对象存储
- 对象存储只能按文件名搜索,你out了吧
- 华为云GaussDB(for Influx)揭密:数据分级存储
- 弹性文件服务解密 -- 块存储、文件存储、对象存储的区别
- 即将到来的“分布式云”(DPaaS):分布式计算+ DB +存储即服务
- mysqldump导出--数据+结构+(函数+存储过程)
- 从jvm的角度考虑链表是如和存储的,并手写Java单向链表的,问题难在节点和头节点的对象引用
- oracle存储过程的例子
- y14.第一章 Ceph企业级存储实战进阶 -- 对象存储RadosGW 使用(十四)
- 【云原生之Docker实战】使用Docker部署MinIO对象存储
- 【云原生之kubernetes】kubernetes集群下Secret存储对象的管理
- k8s-调度器流程和存储架构
- ceph rados 创建存储池 存储池对象查看
- Swift编程语言学习9—— 存储属性和计算属性
- lucene倒排索引瘦身的一些实验——merge的本质是减少cfx文件 变为pos和doc;存储term vector多了tvx和tvd文件有337M
- OpenStack/Gnocchi简介——时间序列数据聚合操作提前计算并存储起来,先算后取的理念
- Golang 调用 aws-sdk 操作 S3对象存储
- Python实现将图片上传到基于阿里云OSS对象存储的图床
- vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
- 12 图入门高性能分布式对象存储 MinIO