javascript用localStorage存储用户搜索词记录，并在搜索框下展显搜索词记录

//首先是storage的一封装

javascript 复制代码

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 复制代码

<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" />&emsp;<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>

最后效果