localStorage 不方便存储数组时的替代方法
项目背景是需要将搜索历史存储到localStorage中,
需要存储id和name,每次存储时都需要在记录中多加一条,用数组push显然是比较好的方法,但localStorage不方便存储数据,于是就想到来存储字符串,用‘逗号’隔开,然后再split('',")转化成数组,代码如下:
let history = localStorage.historyData?localStorage.getItem("historyData"):'';
let item = data + name;
let hisData = localStorage.historyData?history +','+item:item
localStorage.setItem('historyData',hisData)
取到的数据以及转换如下:

这样就可以完成需求,
ps:localStorage需要手动清除才会清空,需要调用
localStorage.clear();
}
localStorage 不方便存储数组时的替代方法的更多相关文章
- ArrayList中存储数组时需要注意到的问题
因为数组的地址是不会发生变化的,每次在数组中的内容改变后,将数组添加到ArrayList中时,会导致ArrayList中的每个内容都是最后添加进去的数据.案例如下所示: Object []objs = ...
- localStorage存、取数组
localStorage存储数组时需要先使用JSON.stringify()转成字符串,取的时候再字符串转数组JSON.parse(). var arr=[1,2,3,4]; localStorage ...
- JSP中的“小饼干”Cookie,用来存储数组的方式(下方已String类型的数组为例:)
1.Cookie常用方法中,存储数据的方式: Cookie cookie = new Cookie("key","Value"); response.addCo ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- 使用sessionStorage、localStorage存储数组与对象(转)
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- localStorage存储对象,sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- localStorage存储数组,对象,localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
- localStorage存储JSON对象的小方法
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数 ...
- List、Map、Set三个接口存储元素时各有什么特点?
List.Map.Set三个接口存储元素时各有什么特点? 解答: 1)List是有序的Collection,使用此接口能够精确的控制每个元素插入的位置.用户能够使用索引(元素在List中的位置,类似于 ...
随机推荐
- 网络编程 -- RPC实现原理 -- RPC -- 迭代版本V1 -- 本地方法调用
网络编程 -- RPC实现原理 -- 目录 啦啦啦 V1——RPC -- 本地方法调用:不通过网络 入门 1. RPCObjectProxy rpcObjectProxy = new RPCObjec ...
- 【代码审计】大米CMS_V5.5.3 后台多处存储型XSS漏洞分析
0x00 环境准备 大米CMS官网:http://www.damicms.com 网站源码版本:大米CMS_V5.5.3试用版(更新时间:2017-04-15) 程序源码下载:http://www ...
- sencha touch 免费培训视频
之前的收费视频现在免费了 sencha touch版本:2.3.1 第一期:https://pan.baidu.com/s/1kUK4OFP 第二期:https://pan.baidu.com/s/1 ...
- day_4.28 py
2018-4-28 15:13:39 ''' 在方法名字加入两个 __则为私有方法 类似于private 方法 ''' class Dog: #私有方法 def __send_msg(self): p ...
- JVM内存GC的骗局——JVM不抛出OOM但内存已经泄露
概述 在日常测试中,我们会去重点观察java的内存使用情况,比如:进程会抛出OOM异常,不再接收新的请求:响应时间在固定时间段内变长,超时或者不响应,CPU使用率时常像过山车一样等.有时候JVM还会发 ...
- windows 开启热点的命令行工具
hotspot.bat @echo off @echo. setlocal enabledelayedexpansion if "%1" == "set" ( ...
- [No0000FC]C# 预处理器指令
预处理器指令指导编译器在实际编译开始之前对信息进行预处理. 所有的预处理器指令都是以 # 开始.且在一行上,只有空白字符可以出现在预处理器指令之前.预处理器指令不是语句,所以它们不以分号(;)结束. ...
- day7:set和深浅copy
1,判断字符串是不是空格isspace函数 s1 = ' ' s2 = ' ssss' print(s1.isspace()) print(s2.isspace()) 运行结果: True False ...
- 编译openssl和Apache报错checking for SSL_CTX_new... no
执行export LDFLAGS=-ldl命令后重新编译
- c#如何调用另外一个项目的类
添加引用即可. 参考资料: https://zhidao.baidu.com/question/241402877.html http://blog.csdn.net/a1027/article/de ...