//首先是storage的一封装
//storage.js文件
function storage(){
//设置storage密钥
this.ms="mystorage";
}
//以下为函数的原型方法
//获得localStorage值
storage.prototype.getLocal=function(key){
//先检查设置的localStorage的密钥
var mydata=localStorage.getItem(this.ms);
if(!mydata)
{
return false;
}
//存在即转换为对象
mydata=JSON.parse(mydata);
//返回data对象中的key属性对应的值，可以是数组也可以是字符
return mydata.data[key];
};
//设置localStorage的值
storage.prototype.setLocal=function(key,value){
//先返回我们设置的localStorage的密钥
var mydata=localStorage.getItem(this.ms);
if(!mydata)
{
//不存在即设置名称
this.init();
//然后再返回名称
mydata=localStorage.getItem(this.ms);
}
//转换为对象
mydata=JSON.parse(mydata);
//将键与值赋值给data对象，注意这个value在后面是一个数组形式
mydata.data[key]=value;
localStorage.setItem(this.ms,JSON.stringify(mydata));
return mydata.data;
};
storage.prototype.removeLocal=function(key)
{
//返回localStorage的密钥
var mydata=localStorage.getItem(this.ms);
if(!mydata)
{
return false;
}
mydata=JSON.parse(mydata);
//删除对象中的属性
delete mydata.data[key];
localStorage.setItem(this.ms,JSON.stringify(mydata));
return mydata.data;
};
storage.prototype.clearLocal=function(){
//删除密钥
localStorage.removeItem(this.ms);
};
storage.prototype.init=function(){
//设置密钥
localStorage.setItem(this.ms,'{"data":{}}');
};
//前端实现搜索框及搜索词历史记录框
<html>
<head>
<meta http-equiv="Content-Type:text/html;charset=utf-8;"/>
<title>测试搜索历史词</title>
<script type="text/javascript" src="storage.js"></script>
<style type="text/css">
#history
{
width:230px;
height:120px;
position:absolute;
top:30px;
left:10px;
border:1px solid #ccc;
margin-top:10px;
display:none;
z-index:20;
}
li
{
list-style:none;
margin-left:10px;
padding-top:1px;
}
a
{
text-decoration:none;
color:black;
font-size:14px;
}
</style>
</head>
<body>
<input type="text" value="" size="30" /> <input type="button" value="搜索"/>
<div id="history"></div>
<script type="text/javascript">
var btn=document.getElementsByTagName('input');
var div=document.getElementById('history');
//创建5个li元素，插入div元素中
for(var j=0;j<5;j++)
{
var li=document.createElement("li");
div.appendChild(li);
}
//然后再获取这些li元素合集
var lis=document.getElementsByTagName("li");
//创建storage对象
var f=new storage();
//按钮事件
btn[1].onclick=function(){
//检查是否已经设置了keywords
var data=f.getLocal("keywords");
//获取input框中的值
var value=btn[0].value;
//如果没有设置，则设置data为一个数组
if(!data)
{
var data=[];
//数组为10个值，如果超过10个，则弹出第1个，方便添加接下来的词
}else if(data.length===10)
{
data.shift();
}
//如果值存在
if(value)
{
//在data数组中没有找到这个值，则将这个搜索词加入data数组中
if(data.indexOf(value)<0)
{
data.push(value);
//将data数组包含的词以数组形式添加到以keywords为对象当中去
//也就是设置keywords对象的值
f.setLocal("keywords",data);
}
}
//隐藏div
div.style.display="none";
};
//搜索框失去焦点事件
btn[0].onblur=function(event){
//显示搜索历史词框
div.style.display="block";
//得到keywords对象的值
var data=f.getLocal('keywords');
if(data)
{
//将得到的历史词添加到对应的li元素中去
for(var i=0;i<data.length;i++)
{
//console.info(lis[i].childNodes[0]);
if(lis[i].childNodes[0]==undefined)
{
//增加历史词的连接
lis[i].innerHTML="<a href='#'>"+data[i]+"</a>";
}else
{
//避免每失去一次焦点就向li元素中添加一次历史词
return;
}
}
}
};
//给每个历史词赋于点击事件，点击词后及给于input框赋值，顺便隐藏历史词框
for(var i of lis)
{
i.onclick=function(){
btn[0].value=this.innerText;
div.style.display="none";
};
}
</script>
</body>
</html>
最后效果
