项目背景是需要将搜索历史存储到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 不方便存储数组时的替代方法的更多相关文章

  1. ArrayList中存储数组时需要注意到的问题

    因为数组的地址是不会发生变化的,每次在数组中的内容改变后,将数组添加到ArrayList中时,会导致ArrayList中的每个内容都是最后添加进去的数据.案例如下所示: Object []objs = ...

  2. localStorage存、取数组

    localStorage存储数组时需要先使用JSON.stringify()转成字符串,取的时候再字符串转数组JSON.parse(). var arr=[1,2,3,4]; localStorage ...

  3. JSP中的“小饼干”Cookie,用来存储数组的方式(下方已String类型的数组为例:)

    1.Cookie常用方法中,存储数据的方式: Cookie cookie = new Cookie("key","Value"); response.addCo ...

  4. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  5. 使用sessionStorage、localStorage存储数组与对象(转)

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  6. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  7. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  8. localStorage存储JSON对象的小方法

    有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数 ...

  9. List、Map、Set三个接口存储元素时各有什么特点?

    List.Map.Set三个接口存储元素时各有什么特点? 解答: 1)List是有序的Collection,使用此接口能够精确的控制每个元素插入的位置.用户能够使用索引(元素在List中的位置,类似于 ...

随机推荐

  1. [破解] nasca drm file -ver1.00

    在使用nasca系统中的下载相应的文件时,默认下载会被Nasca加密,可以通过下面的方式进行免除加密. 首先我们需要了解没有加密系统的默认下载过程: 当下载文件33333333333.pdf时,由于文 ...

  2. 学习mongoDB的网站

  3. rxjs 常用的静态操作符

    操作符文档 API create const { Observable } = require('rxjs'); // 创建 Observables var observable = Observab ...

  4. spring事务实现原理

    实现原理 本质 如果你用过Spring AOP,那么理解注解事务就十分简单了.事务注解本质上实在事务方法加入一个Around切面,在方法开始前开始事务,在抛出异常后回滚事务.使用简单伪代码可以简单理解 ...

  5. go 的 mysql 的简单操作

    关于 sql:https://studygolang.com/articles/3022 异常处理: http://www.jianshu.com/p/f30da01eea97 一.数据库的连接及初始 ...

  6. 用flock命令解决Linux计划任务重复执行

    在做计划任务的时候,可能由于某些问题,任务没有执行完成,导致任务重复的运行,解决这个问题,只需要一个flock命令就可以了. flock --helpflock (util-linux-ng 2.17 ...

  7. tomcat的缺少tcnative-1.dll的解决(申明:来源于网络)

    tomcat的缺少tcnative-1.dll的解决 地址:http://blog.csdn.net/topwqp/article/details/7713388

  8. zabbix监控主机CPU使用率

    zaibix默认模板针对CPU只有监控负载(load)没有监控CPU使用率 选择配置-模板-Template OS Windows-监控项 创建监控项 创建监控图形 查看图像结果

  9. maven项目启动报错:SLF4J: Class path contains multiple SLF4J bindings.

    SringBoot的Application启动报错: SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding ...

  10. 深度学习中将类别标签映射到one_hot向量

    有时我们的样本标签,都是标记从0开始直至到类别的个数.在模型训练的时候,这些标签需要变成one_hot向量,这样才能够跟softmax出来的概率做互熵损失,计算loss. 那么,映射的方法如下: de ...