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处理离线缓存还是存在一些硬伤的,所以真实项 ...
随机推荐
- JavaEE笔记(四)
sql的完整顺序完整的sql语句,由6个子句组成1. from2. where3. group by4. select5. having6. order by # having 和 where的区别w ...
- PostgreSQL的xlog实验一
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页 一,从initdb开始,initdb执行结束 ...
- Error:(1, 1) java: 非法字符: ‘\ufeff’
一.问题 用IDEA打开eclipse java项目编译时,出现以下错误: Error:(1, 1) java: 非法字符: '\ufeff' Error:(1, 10) java: 需要class, ...
- jsp编译原理
jsp运行时都要先转换成servlet,使用tomcat时会在tomcat安装目录下的work生成一系列的运行的项目文件夹,文件下面含有.java文件和编译后的.class文件.jsp最终转化为ser ...
- Python 10min系列之面试题解析丨Python实现tail -f功能
关于这道题,简单说一下我的想法吧.当然,也有很好用的 pyinotify 模块专门监听文件变化,不过我更想介绍的,是解决的思路. 毕竟作为面试官,还是想看到一下解决问题的思路,而且我觉得这一题的难点不 ...
- python 排序模块 ———— heapq(学习笔记)
from heapq import * def heasort(initi):# 排序 h=[] for value in initi: heappush(h,value)#将每一个item进入hea ...
- Linux shell(4)
test比较两个值: 测试比较两个值是linux中常用的比较运算,test命令可以进行对两个值的比较,如果比较成功则返回值为0,否则为非0 常用比较方法: ·1.整数比较 2.字符串比较 3.逻辑比较 ...
- 宏基4752g 开机进度条卡到75%左右,解决办法
起因:更新win10推送的更新补丁,失败自动回退.开机进度条只能走到75%,bios进不去,最后就卡在开机的logo.(还有其他人是win7直接升级win10,也出现了这种情况.)解决办法:重刷bio ...
- Python创建虚拟环境
用于创建和管理虚拟环境的模块称为 venv.venv 通常会安装你可用的最新版本的 Python.如果您的系统上有多个版本的 Python,您可以通过运行 python3 或您想要的任何版本来选择特定 ...
- 【LeetCode算法题库】Day2:Median of Two Sorted Arrays & Longest Palindromic Substring & ZigZag Conversion
[Q4] There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of th ...