JavaScript_Html5_LocalStorage项目demo
项目中localStorage实用
项目中h5本地存储的一个小实用，本意使用cookie，但发现chrome调试被禁用，便用了localStorage.
此需求是一贴吧搜索页，在新用户第一次点击搜索框时为搜索页面，老用户点击搜索框时带有搜索记录，实现方法为在点击搜索按钮时便为用户创建一个本地存储localStorage user-data,判断当页面中含有user-data时便将搜索框的val追加进user-data中，以“|”隔开，若user-data不存在便创建user-data。
var storage=window.localStorage;
if(storage.getItem("user-data")){
var str=storage.getItem("user-data");
storage.setItem("user-data",str+'|'+$('#keyword').val());
}else{
storage.setItem("user-data",$('#keyword').val());
}
当页面加载时若本地localStorage中含有user-data,则获取此数据，返回为字符串，用split方法以“|”为判断条件将此字符串切割为数组，并循环创建，导入页面编辑器中，即：
if($('.search-con') && !findKey('keyWords')){
var html="";
if(window.localStorage && localStorage.getItem("user-data")){
var data=localStorage.getItem("user-data").split('|');
for(var i=data.length-1;i>=0;i--){
html+="<div class='user-his'>"+data[i]+"</div>"
}
$('.user-clear').show();
}else{
html='<i class="iconfont icon-wenbensousuo"></i><br><span>未搜索任何信息</span>'
}
$('.search-con').html(html);
}
其中findKey()方法为判断路径中是否含有搜索关键字keyWords，需求是当含有搜索关键字时显示为搜索结果，无需关注。
function findKey(name){
var str=window.location.href;
return str.indexOf(name)==-1?false:true;
}
点击清除搜索记录时清除user-data,即：
localStorage.removeItem("user-data");
点击搜索时将搜索框val拼入路径，页面刷新获取后台数据，减少ajax请求，search.html为相对路径，即是当前文件名即可：
window.location.href='search.html?keyWords='+encodeURI($('#keyword').val());
实现此需求只需后端一个页面即可（我们后端为asp.net），贴出完整测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<link href="http://img.pccoo.cn/wap/webapp/font/iconfont.css" rel="stylesheet">
<script type="text/javascript" src="http://img.pccoo.cn/wap/js2/jquery.js?v1.0"></script>
<title>论坛搜索</title>
<style>
/*2016-12-1 wm*/
*{padding:0;margin:0;}
li{list-style: none}
input{outline: none}
.s-content{background:#fff;padding:10px;position:relative;height:30px;border-bottom:1px solid #e5e5e5;}
.sear-wrap{display:-webkit-box;display:flex;width:80%;padding:5px; border-radius:20px;background:#f0f0f0;position:absolute;top:20%;left:10px;z-index:9;}
.sear-wrap input[type=text] { display:block;-webkit-box-flex:1;flex:1;height:24px;line-height:24px;color:#666;border:none;background:none;text-indent:10px;}
.s-content .tishi{position:absolute;right:10px;top:16px;color:#09f;font-size: 14px}
.search-con{width: 100%;background: #fff;text-align: center;}
.search-con i{margin-top:100px;font-size: 80px;background: #f0f0f0;border-radius: 50%;width: 160px;height: 160px;display: inline-block;line-height: 160px;color:#ddd;}
.search-con span{margin-top:10px;color:#ccc;display: inline-block;}
.search-con .user-his{width: 100%;height: 40px;color:#333;line-height: 40px;text-align:left;padding-left:10px;font-size: 16px;border-bottom:1px solid #eee;}
.user-clear{width: 90px;height: 30px;border-radius: 10px;font-size:14px;color:#09f;border:1px solid #09f;margin:20px auto;line-height: 30px;padding:0 10px;display: none}
#span_search{width:30px;text-align: center;}
#span_search i{color:#ccc;}
#span_search i.icon-guanbi1{color:#ccc;}
.srhword {position: absolute;top: 100px;border-radius: 0 0 3px 3px;width: 95%;z-index: 20;background: #fff;overflow-y: auto;_display: none;padding:10px 10px 40px;}
.srhword li{padding:0px 0 10px;border-bottom:1px solid #eee;}
.srhword .end-title{color:#999;margin:10px 0;font-size: 16px;border:none;}
.srhword span{color:red;}
.srhword .p1{color:#333;font-size: 16px;line-height: 26px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; }
.srhword .p2{color:#ccc;font-size: 12px;margin-top:10px;position:relative;}
.srhword .p2 i{font-size: 12px;margin-right:10px;}
.srhword .p2 em{position:absolute;right:10px;}
.load-more{position:absolute;bottom:0;left:0;line-height: 40px;text-align: center;width: 100%;background: #f0f0f0;}
.load-more img{vertical-align: middle;}
header dl dd.right-search{position:absolute;top:0;right:80px;}
header dl dd.right-search i{font-size: 37px;color:#fff;}
</style> </head>
<body>
<section class="s-content">
<form action="" method="get">
<div class="sear-wrap">
<input type="text" class="inp_srh" name="keyword" id="keyword" placeholder="请输入帖子关键词" maxlength="20">
<span id="span_search"><i class="iconfont icon-search1"></i></span>
</div>
<span class="tishi">搜索</span>
</form>
</section>
<section class="search-con"> <!-- <i class="iconfont icon-search1"></i>
<br>
<span>未搜索任何信息</span> -->
<!-- <div class="user-his">范冰冰</div> -->
</section>
<div class="user-clear">清除搜索记录</div>
<!-- <div class="load-more">加载更多</div> -->
<script>
//判断页面地址中是否含有key
if(findKey("keyWords")){
$(document).find('.search-con').attr('class','srhword').removeClass('search-con');
var key=window.location.search;
$('.srhword').html('<li class="end-title">关于<span> "汽车" </span>的搜索结果</li>\
<!-- <li class="end-title">未找到关于<span> "汽车" </span>的相关信息</li> -->\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村悄悄的进村悄悄的进村悄悄的进村悄悄的进村，悄悄的进村，悄悄的进村，</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
<li>\
<p class="p1">悄悄的进村，<span>汽车</span>悄悄的进村，悄悄的进村</p>\
<p class="p2"><i class="iconfont icon-touxiang"> 抹脸花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分钟前</p>\
</li>\
')
$('.srhword').append('<div class="load-more">加载更多</div>');
// match(/aaa(\S*)/)[1]
key=key.match(/=(\S*)/)[1];
$.ajax({
url:'',
type:'get',
autoChange: true,
data: { 'key': key},
success:function(data){ },
error:function(){}
})
}
//判断网页地址中是否包含key
function findKey(name){
var str=window.location.href;
return str.indexOf(name)==-1?false:true;
}
//点击清除清空输入框内容
$('#span_search').on('click',function(){
if($('#span_search').find("i").hasClass("icon-guanbi1")){
$("#keyword").val("");
$('#span_search i').removeClass('icon-guanbi1').addClass('icon-search1');
}
})
//输入内容时显示清除按钮
$('#keyword').keyup(function(){
$('#span_search i').removeClass('icon-search1').addClass('icon-guanbi1');
})
//判断如果有本地数据缓存生成列表
if($('.search-con') && !findKey('keyWords')){
var html="";
if(window.localStorage && localStorage.getItem("user-data")){
var data=localStorage.getItem("user-data").split('|');
for(var i=data.length-1;i>=0;i--){
html+="<div class='user-his'>"+data[i]+"</div>"
}
$('.user-clear').show();
}else{
html='<i class="iconfont icon-wenbensousuo"></i><br><span>未搜索任何信息</span>'
}
$('.search-con').html(html);
}
//点击搜索记录刷新页面
$('.search-con').find('div').on('click',function(){
window.location.href='search.html?keyWords='+encodeURI($(this).text());
})
//点击搜索按钮将搜索内容存入本地
$('.tishi').on('click',function(){
if(window.localStorage && $('#keyword').val()!=""){
var storage=window.localStorage;
if(storage.getItem("user-data")){
var str=storage.getItem("user-data");
storage.setItem("user-data",str+'|'+$('#keyword').val());
}else{
storage.setItem("user-data",$('#keyword').val());
}
}
// var reg=/\?(.*?)\=/g;
// 将搜索内容传入url刷新页面
if($('#keyword').val()!=""){
window.location.href='search.html?keyWords='+encodeURI($('#keyword').val());
}
})
//点击清除本地存储
$('.user-clear').on('click',function(){
localStorage.removeItem("user-data");
$('.search-con').remove("div");
$(this).hide();
window.location.href=window.location.href;
})
//滑动加载下一页
if($('.load-more') && $('.load-more').offset().top<$(window).height()){
$('.srhword').find('.load-more').html('没有更多内容了。。')
}
$(window).scroll(function(){
if($(document).scrollTop()+$(window).height()>=$('.load-more').offset().top){
var flag=true,
pageIndex=0;
if(!flag)return;
flag=!flag;
pageIndex++;
$('.srhword').find('.load-more').html("<img src='http://img.pccoo.cn/wap/images/load.gif' />正在加载，请稍后…")
$.ajax({
url:'',
type:'get',
autoChange: true,
data: { 'key': key,'pageIndex':pageIndex},
success:function(data){
if(data){
$('.srhword').find('.load-more').before(data);
$('.srhword').find('.load-more').html('滑动加载更多')
}else{
$('.srhword').find('.load-more').html('没有更多内容了。。')
}
flag=!flag;
},
error:function(){}
})
}
}) </script>
</body>
</html>
直接复制到本地便可测试，调试状态为移动端效果更佳，如果路径中含有keyWords则为测试数据，将.html后面的数据删除即是搜索页面。若有疑问或错误，请多多交流，谢谢~~
加上项目链接http://m.tn.ccoo.cn/bbs/search.aspx
JavaScript_Html5_LocalStorage项目demo的更多相关文章
- Cling项目demo实现Android+DLNA实现
dlna多屏互动技术在Android和ios上面应用很广,所以自己为了学习,就官方提供的远吗进行了学习. http://4thline.org/projects/cling 由于是一个maven构建的 ...
- servlet01 项目demo、servlet生命周期
1 环境说明 jdk: 1.8 tomcat: 8.0 2 项目demo 2.1 新建一个动态的web项目 2.2 新建一个servlet类 该类必须继承 HttpServlet 技巧01:Htt ...
- 3.Ventuz Designer新建项目Demo
Ventuz Designer新建项目Demo 1.打开ventuz,点Recent Projects>New Project,在弹出的界面填写具体项目信息,如下图: 图1.1 图1.2 2.在 ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- Dubbo项目demo搭建
项目参考: http://dubbo.io/User+Guide-zh.htm https://my.oschina.net/superman158/blog/466637 项目使用 maven+id ...
- 基于SpringMVC框架项目Demo
Git地址:https://github.com/JavaWeb1024/SpringMVC 1. 框架简介: 为打造一套集群高可用的框架,集成的技术目前比较成熟,稳定．相关的知识点在网络上也 ...
- Spring Data Redis简介以及项目Demo，RedisTemplate和 Serializer详解
一.概念简介: Redis: Redis是一款开源的Key-Value数据库,运行在内存中,由ANSI C编写,详细的信息在Redis官网上面有,因为我自己通过google等各种渠道去学习Redis, ...
- 项目DEMO下载
1.mybatis_generator自动生成代码demo github项目地址:https://github.com/JsonShare/mybatis_generator 2.设计模式解密系列示例 ...
- 将项目Demo上传到Github上的操作步骤
之前我有很多代码直接上传到了CSDN上,主要是因为操作方便,今天我就说说将源码Demo上传到Github上的操作步骤. 首先,你要先确定自己在Github上有自己的账户名,账户邮箱和密码.如果没有可以 ...
随机推荐
- 基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用
在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...
- 理解ip和端口
理解IP和端口 IP地址是一个规定,现在使用的是IPv4,既由4个0-255之间的数字组成,在计算机内部存储时只需要4个字节即可.在计算机中,IP地址是分配给网卡的,每个网卡有一个唯一的IP地址,如果 ...
- 如何用UE（UltraEdit）删除重复行？--转
原文地址:https://www.zhengjie.com/question/bb148773 使用UE(UltraEdit)的高级排序功能就可以删除掉所有的重复行. 操作步骤 1.文件—排序(R)— ...
- Example of ApplicationContextAware in Spring--转
原文地址:http://www.concretepage.com/spring/example_applicationcontextaware_spring In spring we can get ...
- Anliven - 如何逼疯你的小伙伴
如果你也曾为某人某事"发疯发狂,懵逼连连". . 无礼:随意牵扯他人,不了解实际情况,却对他人工作横加点评甚至是指责. 无知:自我感觉良好,自己总是最正确最合理的,除了自己,没人会 ...
- [python]计算机使用过程中，眼睛强制休息
前言 现在的电脑族们,在使用电脑的过程中,常常忘记了时间的流逝,要么忙碌在电视剧的观看中,要么忙碌在工作中,要么忙碌在游戏中,往往忽视了对眼睛的正常保护,让眼睛能够在空闲的时候获得足够的休息时间. 我 ...
- Jackson序列化和反序列化Json数据完整示例
Jackson序列化和反序列化Json数据 Web技术发展的今天,Json和XML已经成为了web数据的事实标准,然而这种格式化的数据手工解析又非常麻烦,软件工程界永远不缺少工具,每当有需求的时候就会 ...
- Theano入门神经网络(二) 实现一个XOR门
与非门的图片如下 示意图 详细解释: 1 定义变量的代码,包括了输入.权值.输出等.其中激活函数采用的是sigmod函数 # -*- coding: utf-8 -*- __author__ = 'A ...
- angularjs input上传图片前获取图片的Size
首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { ...
- .NET中类(class)与结构(struct)
结构是值类型:值类型在栈上分配空间: 类是引用类型:引用类型在堆栈上分配空间: 虽然结构与类的类型不一样,可是他们的基类型都是对象(object),c#中所有类型的基类型都是object: 虽然 ...