项目背景是需要将搜索历史存储到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. Java -- 异常的捕获及处理 -- 异常类的继承结构

    7.1.3 异常类的继承结构 在整个Java的异常结构中,实际上有两个最常用的类,分别为Exception和Error,这两个类全都是Throwable的子类. ⊙ Exception : 一般标识的 ...

  2. akka pubsub example

    测了一个小时的 Pubsub 模式,发现这个模式和自己预期的不太一样,具体表现在: 1. 当 subscriber 订阅了某个 topic 并附带 groupName 时,如果 publish 发布的 ...

  3. 关于Kafka high watermark的讨论2

    之前写过一篇关于Kafka High watermark的文章,引起的讨论不少:有赞扬之声,但更多的是针对文中的内容被challenge,于是下定决心找个晚上熬夜再看了一遍,昨晚挑灯通读了一遍确实发现 ...

  4. iOS(WKWebView)OC与JS交互 之三

      随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...

  5. 【phpMQTT】phpMQTT详解以及处理使用过程中内存耗死问题

    参考文档: https://www.cloudmqtt.com/docs-php.html github下载 : https://github.com/bluerhinos/phpMQTT Cloud ...

  6. shell利用数组分割组合字符串

    #!/bin/bash #接收脚本参数如[sh a.txt .0_3_4_f_u_c_k_8080] a=$ #把参数分割成数组 arr=(${a//_/ }) #显示数组长度 #echo ${#ar ...

  7. python爬虫之真实世界中的网页解析

    Request和Response Request是我们平常浏览网页,向网站所在的服务器发起请求,而服务器收到请求后,返回给我们的回应就是Response,这种行为就称为HTTP协议,也就是客户端(浏览 ...

  8. springboot面试题总结

    什么是springboot         用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件)                  创建独立的s ...

  9. CCPC-Wannafly Winter Camp Day4 Div1 - 夺宝奇兵 - [简单思维题]

    题目链接:https://zhixincode.com/contest/18/problem/A?problem_id=259 题目描述 wls正在玩一个寻宝游戏. 宝藏一共有 $n$ 种,都藏在一个 ...

  10. angular ajax请求 结果显示显示两次的问题

    angular 项目中,由于用到ajax 请求,结果显示如下情况 同样的接口,显示两次,其中第一次请求情况为 request method 显示为opttions 第二次的情况是 为啥会出现如此的情况 ...