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中的位置,类似于 ...
随机推荐
- Hadoop -- ES -- CURD
1.获取ES连接 package com.ciic.history.common; import org.elasticsearch.client.transport.TransportClient; ...
- ElasticSearch6(二)-- Java API连接es
此ElasticSearch系列基于最新版的6.2.4版本. 一.pom.xml依赖 <dependencies> <dependency> <groupId>ju ...
- 网络通信协议之ICMP
ICMP(互联网控制消息协议) ICMP >>Internet Control Message Protocol IP协议的缺点: >>无差错报告和差错纠正机制 >> ...
- Smarty模板保留缓存
<?php //缓存 //注:使用缓存需要用到这几个方法: //(ob_start(开启内存缓存); ob_flush(清除内存缓存);) //file_exists这个方法是判断文件是否存在 ...
- 洛谷P1162 填涂颜色【bfs】
题目链接:https://www.luogu.org/problemnew/show/P1162 题意: 有一个0和1组成的矩阵,一些1组成一个闭合圈,圈住一些0,现在要把被圈住的这些0变成2输出. ...
- Echarts 的Formatter的回调函数
option = { tooltip: { trigger: 'axis', formatter: function (params,ticket,callback) { let res = para ...
- AngularJs 常用指令标签
1.ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上 例:<html ng-app="problem"> 2.n ...
- php之memcached存储session配置、存储、获取
[session] ①.session.save_handler = memcache session.save_handler 定义了来存储和获取与会话关联的数据的处理器的名字,默认是files ② ...
- Chap1 引言[The Linux Command Line]
附上链接:http://billie66.github.io/TLCL/book/chap01.html Content: part1-Introduction part2-Learning The ...
- xcode工程编译错误:"An instance 0xca90200 of class UITableView was deallocated while key value observers were still registered with it"
An instance 0xca90200 of class UITableView was deallocated while key value observers were still regi ...