html5 保存 搜索历史,前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛...
HTML5技术
前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛
字号+
作者:H5之家 2017-04-12 14:00
得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage、localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能有数据库存储的功能。 搜索记录可以用前端实现,由于这些数据没有特别安全的要求,用户搜索过的关键词保
得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage、localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能有数据库存储的功能。
搜索记录可以用前端实现,由于这些数据没有特别安全的要求,用户搜索过的关键词保存在用户本地是完全可以的。这样做也可以减少服务器的压力。
搜索记录应该采用localStorage永久的存储,当用户下次访问的时候,这个数据还在。
下面的例子是手机端网页,布局比较粗糙,除了替换搜索的按钮图片。其他的功能都正常。
主要思路:在向localStorage存储的时候,以点击搜索的时间戳为key,以搜索的词语为value.最多存储5条数据。当超过5条,会删除最早的记录。
1元许愿
.history{
text-align:center;
}
#idNumber1{
width:50%;
overflow:hidden;
text-align:left;
height:38px;
border:1px solid #ccc;
border-radius: 10px;
}
.delete:after{
clear:both;content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
.delete>div {
border-radius: 50px;
float: left;
width: 19%;
border: 1px solid #ccc;
background: #E0E0E0;
}
#search{
width: 141px;
height: 37px;
font-size: 14px;
line-height: 14px;
color: #959595;
padding-bottom: 2px;
}
#his-dele{
width: 22px;
height: 22px;
line-height: 22px;
display: inline-block;
background: #E0E0E0;
color: #fff;
border-radius: 50%;
text-align: center;
margin-left:10px;
}
按钮
$(document).delegate(".delete>div","click",function(){
$("#idNumber1").val($(this).text());
});
/*搜索记录相关*/
//从localStorage获取搜索时间的数组
var hisTime;
//从localStorage获取搜索内容的数组
var hisItem;
//从localStorage获取最早的1个搜索时间
var firstKey;
function init (){
//每次执行都把2个数组置空
hisTime = [];
hisItem = [];
//模拟localStorage本来有的记录
//localStorage.setItem("a",12333);
//本函数内的两个for循环用到的变量
var i=0
for(;i
if(!isNaN(localStorage.key(i))){
hisItem.push(localStorage.getItem(localStorage.key(i)));
hisTime.push(localStorage.key(i));
}
}
i=0;
//执行init(),每次清空之前添加的节点
$(".delete").html("");
for(;i
//alert(hisItem);
$(".delete").prepend(''+hisItem[i]+'
')
html5 保存 搜索历史,前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛...相关推荐
- 使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览
得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage.localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能有数据库存储的功能. ...
- Android仿淘宝历史搜索功能,使用localStorage实现历史记录搜索功能也便是天猫app历史记录存储方便浏览...
使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览 得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage.localSt ...
- 前端实现搜索记录功能
代码乱掉了...移步 得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage.localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能 ...
- android 利用数据库实现历史搜索记录功能
最近在一个项目中使用到了搜索功能,特来此记录一下 本篇博文需要用到的知识点: 1.RecyclerView的简单操作 2.本地数据库的简单操作 3.ScrollView与RecyclerView的滑动 ...
- App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能 最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
- php记录用户搜索历史记录,PHPCookei记录用户历史浏览信息的代码
[基础] Cookie常用方法: $_COOKIE['RecordLuHuiDUDU'] 得到Cookie setcookie('RecordLuHuiDUDU',",time()-3600 ...
- GreenDao+SearchView+FlowLoyout实现搜索历史和热门搜索
之前写过一个静态的搜索页 FlowLayout流式布局实现标签.类似热门搜索这种效果 只是能实现界面效果,但是往往开发中是要把搜索历史缓存到本地数据库中,所以在原基础上添加了数据库功能. 并且把搜索框 ...
- 微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能
微信小程序搜索,搜索历史,清除搜索历史,以及点击搜索历史实现搜索功能 热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多 wxml页面 <view class="search-he ...
- 搜索计算机文件夹的记录怎么删除,windows7搜索记录怎么删除_win7怎样清除电脑文件搜索记录-win7之家...
由于win7系统中拥有着过多的文件,因此用户每次需要打开对应的文件时都会通过系统搜索功能来完成,这就导致了win7系统中保存着大量的文件搜索记录,不利于保证用户的隐私安全,那么windows7搜索记录 ...
- 工作中搜索页面搜索记录功能的封装(存储到本地)
//!*封装添加搜索记录功能 (newRecord:str,当参数为空时为获取历史记录; num:记录数,默认为12条;) function addHisRecord(newRecord, num){ ...
最新文章
- 游戏AI之决策结构—行为树
- opencv及相机相关6
- C/C++#if #ifdef #ifndef的区别
- 浏览器中的JavaScript
- Cisco AP base configure
- Netlink套接字
- teablue数据分析_Bluetea蓝茶的品牌该如何分析,你知道吗
- 揭晓:为什么建议每个开发人员都学Python?
- access2016访问mysql,《c#_vs2016对Access数据库的链接操作》.pdf
- QQ聊天记录恢复、迁移教程(改变默认存储位置、个人文件夹保存位置)【转载】
- 照片损坏怎么办,怎么恢复受损照片
- pip install xxx模块如何自动桥接国内镜像源
- python 类属性函数,python_30期【类包含属性和函数】
- LINUX防火墙开放端口,查看状态,查看开放端口
- 使用python实现图像对比度增强
- 删除指定位置的元素(数组)(PTA)
- 模拟电话录音系统2.0
- 简历制作要点与面试技巧
- echarts 热点泡泡图
- 计算机黑屏的原因及解决办法,电脑黑屏的原因及排除方法大全
热门文章
- 富途牛牛api_k牛刮毛是改善API的好方法
- Burpsuite插件开发
- PS--人物皮肤处理流程(一)
- mysql显示1146_MySQL查询报错:ERROR 1146 (42S02): Table 'craw.sitePageConfig' doesn't exist
- 为知笔记如何一键收藏微信文章?
- 零基础转行软件测试有前途吗?为什么说软件测试是极具发展前途的
- Pod状态异常排查问题集-pending状态排查思路
- 科技的性感:三星冰洗如何演绎时尚生活?
- intellij idea配置网络代理
- Excel如何将一列数据转为一行