input 搜索localStorage存储历史记录 删除历史记录
/*
* 历史记录 展示 + 删除
*/
var searchArr;
//定义一个search的，判断浏览器有无数据存储（搜索历史）
if(localStorage.search) {
//如果有，转换成 数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）
searchArr = localStorage.search.split(",");
MapSearchArr();
} else {
//如果没有，则定义searchArr为一个空的数组
searchArr = [];
};
//删除历史记录
$("#removeSearch").on("click",function(){
console.log(searchArr)
searchArr = [];
localStorage.search=searchArr;
MapSearchArr()；
})
//把存储的数据显示出来作为搜索历史
$("#btn").on("click",function () {
var val = $("#searchs").val();
//点击搜索按钮时，去重
KillRepeat(val);
//去重后把数组存储到浏览器localStorage
localStorage.search = searchArr;
//然后再把搜索内容显示出来
MapSearchArr();
});
function MapSearchArr() {
var tmpHtml = "";
for(var i = 0; i < searchArr.length; i++) {
tmpHtml += '<a href=""><button type="button" class="mui-btn btn-city mui-btn-gray">' + searchArr[i] + '</button></a>';
}
$("#keyname").html(tmpHtml);
}
//去重
function KillRepeat(val) {
var kill = 0;
for(var i = 0; i < searchArr.length; i++) {
if(val === searchArr[i]) {
kill++;
}
}
if(kill < 1) {
searchArr.push(val);
}
}
}
input 搜索localStorage存储历史记录 删除历史记录相关推荐
- 小程序搜索框组件，带历史记录和搜索推荐。
1.给input搜索框添加双向绑定v-model到keyword关键字,添加@input事件,当触发@input事件,发起搜索建议请求,参数包含keyword,将返回的列表添加到 data新建列表里, ...
- uniapp | 搜索页 显示或清除历史记录 | 代码分析
一.主要功能和演示 1.搜索页的主要功能 (1)输入关键词,点击搜索(或键盘回车),页面跳转到搜索结果页 (2)之前搜索过的关键词在历史记录里显示,并且按最近到最远搜索过的顺序排列 (即:若搜索一个关 ...
- 删除历史记录后，兼容性视图列表被清空怎么办？
原文链接:http://kms.lenovots.com/kb/article.php?id=17612 很多人都知道IE10有个兼容性视图的功能,你可以将常用的网站添加进兼容性视图列表中.最近我在使 ...
- 猎豹浏览器怎么查看历史记录 猎豹浏览器历史记录查看教程
很多时候我们用浏览器搜索网页,就会产生历史记录.今天小编就给大家讲讲猎豹浏览器怎么查看历史记录?让你快速找到历史搜索信息. 猎豹浏览器历史记录查看教程 1.打开你的猎豹浏览器,左上角有一个豹子的图片, ...
- vue保存页面的值_vue中使用localStorage存储信息
一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...
- Web存储—localStorage存储
Web存储-localStorage存储 一. localStorage存储 特点:特点:本地存储数据的不需要网络.大小5M .域内安全.永久存储.只要不删除,就一直存在 二.语法 设置:localS ...
- 基于vue练习demo：发表评论案例 (使用localStorage存储数据)
前言 最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpac ...
- sessionStorage与localStorage存储 localStorage.getItem(
WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...
- localStorage存储数据的格式
1. localStorage 是以字符串的形式来存储的 //存:转为字符串let obj = {"name":"Lee","age":&q ...
- java stringbuffer 转数组_JAVA之旅（十七）——StringBuffer的概述，存储，删除，获取，修改，反转，将缓存区的数据存储到数组中，StringBuilder...
JAVA之旅(十七)--StringBuffer的概述,存储,删除,获取,修改,反转,将缓存区的数据存储到数组中,StringBuilder 讲完String,我们来聊聊他的小兄弟 一.StringB ...
最新文章
- python3编码转换_Python3编码转换
- 【知识星球】颜值，自拍，美学三大任务简介和数据集下载
- 一加3t刷机后还卡_一加8T/8/8Pro 氢OS11刷入面具magisk完美root权限超简单教程
- 搭建 Verilog 仿真环境
- 枚举枚举和修改“最终静态”字段的方法
- python正则表达式入门_Python中的正则表达式教程
- 美团大脑：知识图谱的建模方法及其应用
- 《DeepLearning.ai 深度学习笔记》发布，黄海广博士整理
- loadrun Java 添加参数_loadrunner手动关联参数化问题总结
- 速成pytorch学习——5天nn.functional 和 nn.Module
- python函数打印乘法表_Python中内置函数来打印数学乘法表
- python如何生成excel文件夹_用python脚本通过excel生成文件夹树结构
- 3DShader之移位贴图(Displacement Mapping)
- Android三种左右滑动效果 手势识别(转)
- MyBatis下载和环境搭建
- ctf.show wbe 3 wp
- mimo雷达虚拟阵列matlab,基于Matlab的雷达阵列天线信号的波达方向估计
- 李沐 动手学深度学习 第二版
- POJO类toString()方法
- 顶级域名 一级域名 二级域名 三级域名