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中的位置,类似于 ...
随机推荐
- 如何在Django1.8 结合Python3.4版本中使用MySql
Python2.7时代连接MySql的MySQLdb还不支持Python3.4. pip install pymysql 最关键的一点,在站点的__init__.py文件中,我们添加如下代码: 1 i ...
- Docker的概念术语(2)
Docker是什么? Docker是开发人员和系统管理员使用容器开发,部署和运行应用程序的平台.使用Linux容器部署应用程序称为容器化.Linux容器不是一个全新的概念,它们用于轻松部署应用程序. ...
- webpack 运行提示“The ‘mode‘ option has not been set”的原因和解决方法
最近在研究webpack,当我执行npm run build / npm start / npm run server等命令时,都是提示下面的警告信息 WARNING in configuration ...
- 【JAVA-JDT-AST】Java抽象语法树的构建、遍历及转成dot格式(附Github源码)
Background: 最近为了重现tree-based clone detection的论文:L. Jiang, G. Misherghi, Z. Su, and S. Glondu. Deckar ...
- ALTER SEQUENCE 导致 REPLICAT 延时
1.查看OGG线程状态 GGSCI (klcoredb-node1) 46> info all Program Status Group Lag at Chkpt Time Since Chkp ...
- [原]openstack-kilo--issue(十九) ImportError: Could not import settings 'openstack_dashboard.settings' (Is it on sys.path? Is there an import error in the settings file?): No module named main
查看此问题的时候请先查看 这个问题包含在(十)中,此篇只是从(十)中分离出来 openstack-kilo--issue(十)ERROR: openstack Unable to establish ...
- linux 下开源代理路由工具
服务器搭建,参考 https://gfw.press/blog/?p=21 运行环境 openjdk1.8,linux 1.首先,获取工具地址 git clone https://github.com ...
- ElasticSearch入门 第二篇:集群配置
这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...
- d7
小数据池:int -5~256str 特殊字符,*数字20 ascii : 8位 1字节 表示1个字符unicode 32位 4个字节 表示一个字符utf- 8 1个英文 8位,1个字节 欧洲 16位 ...
- 基于微服务架构、运行于容器中的.NET Core示例应用eShopOnContainers
eShopOnContainers 是 <.NET Microservices – Architecture for Containerized .NET Applications>这本微 ...