localStorage存储数组,对象,localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,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的方法还能用于深拷贝,有兴趣可以看看博主这篇文章。
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象的更多相关文章
- localStorage存储对象,sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- web存储机制(localStorage和sessionStorage)
web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- 浏览器存储(cookie、localStorage、sessionStorage)
互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...
- JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)
一.离线应用 所谓离线web应用,就是在设备不能上网的情况下仍然可以运行的应用. 开发离线web应用需要几个步骤:首先,确保应用知道设备是否能上网,以便下一步执行正确的操作:然后,应用还必须能访问一定 ...
- JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB
基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...
- jquery访问浏览器本地存储cookie,localStorage和sessionStorage
前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...
- 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享) 1. 离线缓存(xxx.manifest) H5处理离线缓存还是存在一些硬伤的,所以真实项 ...
随机推荐
- 使用Nginx+uWSGI+Django方法部署Django程序
第一步先解决uwsgi与django的桥接.解决在没有nginx的情况下,如何使用uwsgi+DJANGO来实现一个简单的WEB服务器. 第二步解决uwsgi与Nginx的桥接.通过nginx与uws ...
- 18-[模块]-random&os&sys
1.random模块 程序中有很多地方需要用到随机字符,比如登录网站的随机验证码,通过random模块可以很容易生成随机字符串 # randrange #返回1-3之间的一个随机数,不包含3 # ra ...
- 【JUC源码解析】ForkJoinPool
简介 ForkJoin 框架,另一种风格的线程池(相比于ThreadPoolExecutor),采用分治算法,工作密取策略,极大地提高了并行性.对于那种大任务分割小任务的场景(分治)尤其有用. 框架图 ...
- Jsp中格式化时间戳的常用标签
接下来一段时间的记录,虽然不是一些什么全新的知识,但是作为后台开发人员都是应该必须掌握的前端基础技能,说实话,每一个后台程序员的短板就在于前端技能的弱而造就了不能更上一层楼.从今天开始,我将彻底开启菜 ...
- 【Python学习笔记之三】lambda表达式用法小结
除了def语句之外,Python还提供了一种生成函数对象的表达式形式.由于它与LISP语言中的一个工具很相似,所以称为lambda.就像def一样,这个表达式创建了一个之后能够调用的函数,但是它返回了 ...
- Pyhton配置CGI
目录 CGI配置(Mac版) 添加CGI python文件测试 CGI--common gateway interface 通用网关接口的意思,本文通过python的CGI来整体了解下CGI的配置和使 ...
- git push失败
不知道弄错了什么上传项目到github上失败 git commit的时候提示 On branch masternothing to commit, working tree clean git pus ...
- Java生成唯一ID
这里我用的是Java提供的java.util.UUID类来产生随机字串,UUID码是什么我就不再赘述,能满足我们的需求就可以. 下面是java代码: import java.util.UUID; pu ...
- python 思维导图-linux命令
linux基础 linux关于文件/目录的终端命令 linux关于文件内容处理的终端命令
- Deep learning for visual understanding: A review 视觉理解中的深度学习:回顾 之一
Deep learning for visual understanding: A review 视觉理解中的深度学习:回顾 ABSTRACT: Deep learning algorithms ar ...