项目背景是需要将搜索历史存储到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. Context namespace element 'component-scan' and its parser class [org.springframework.context.annotation.ComponentScanBeanDefinitionParser] are only available on JDK 1.5 and higher

    异常信息如下: 错误: Unexpected exception parsing XML document from class path resource [spring/applicationCo ...

  2. 什么是web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  3. NHibernate.3.0.Cookbook第一章第五节Setting up a base entity class

    Setting up a base entity class设置一个实体类的基类 在这节中,我将给你展示怎么样去为我们的实体类设置一个通用的基类. 准备工作 完成前面三节的任务 如何去做 1.在Ent ...

  4. mui---获取入口文件对象

    在做APP的时候,发现在Hbuilder里面,如果是已经加载过的页面,可以通过 plus.webview.getWebviewById(id),拿到加载的页面对象,这里的id默认是url,但是入口文件 ...

  5. Python scipy 计算短时傅里叶变换(Short-time Fourier transforms)

    计算短时傅里叶变换(STFT) scipy.signal.stft(x,fs = 1.0,window ='hann',nperseg = 256,noverlap = None,nfft = Non ...

  6. day_11py学习

    ''' 字典增加和删除 1.添加 xxx[新的key] = value 2.删除 del xxx[key] 3.修改 xxx[已存在的key] = new_value 4.查询 xxx.get(key ...

  7. echarts tooltip 自定义提示信息添加圆点

    tooltip自定义时,给文字前加圆点 tooltip: { formatter: '{b}<br /><span style="display:inline-block; ...

  8. 微信token验证失败的几种情况

    最近在研究用PHP做微信开发的时候,“修改配置时”,总是遇到token验证失败的提示.历经一番查找,种种输出日志和echo,发现,如果不echo调试信息,也不写日志,就不需要ob_clean(),如果 ...

  9. [No0000146]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈3/4

    前言   虽然在.Net Framework 中我们不必考虑内在管理和垃圾回收(GC),但是为了优化应用程序性能我们始终需要了解内存管理和垃圾回收(GC).另外,了解内存管理可以帮助我们理解在每一个程 ...

  10. 量子杨-Baxter方程新解系的一般量子偶构造_爱学术 https://www.ixueshu.com/document/f3385115a33571aa318947a18e7f9386.html

    量子杨-Baxter方程新解系的一般量子偶构造_爱学术 https://www.ixueshu.com/document/f3385115a33571aa318947a18e7f9386.html