JS如何实现记录搜索框搜索历史

类似于360搜索百度搜索那种,能给个Demo吗?说一下思路也行,或者有框架也行

HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除。

如果ok的话可以考虑回显

localStorage cookie 数组 都可以实现

简单的就可以直接使用本地cookie实现,给你一个简单的demo,这个在ie10上测试了一下,关闭浏览器从新打开仍旧存在。

 <html>
<head>
<script type="text/javascript">
    function chkcookies(NameOfCookie)
    {
        var c = document.cookie.indexOf(NameOfCookie+"="); 
        if( (c == "undefined")||(c == 'undefined')|| (typeof(c) == "undefined"))
        {
            return false;
        }
        return true;
    }

    function delCookie(NameOfCookie)//删除cookie
    {
        document.cookie = NameOfCookie+"=;";
    }

    function addCookie(NameOfCookie,objValue,expiredays)
    {
        var oldCookie = getCookie(NameOfCookie);
        //var tmp = typeof(oldCookie);
        //alert(tmp);
        //需要设置过期时长,否则关闭浏览器就会清除cookie
        var exp = new Date();
        exp.setTime(exp.getTime() + expiredays*24*60*60*1000);
        var expires = "expires="+exp.toUTCString();
        //alert(expires);
        if( (oldCookie == "undefined")||(oldCookie == 'undefined')|| (typeof(oldCookie) == "undefined"))
        {
            document.cookie = NameOfCookie+"="+objValue +";"+ expires;
        }
        else
        {
            document.cookie = NameOfCookie+"="+oldCookie+"|"+objValue +";"+ expires;
        }
    }

    function getCookie(NameOfCookie)
    {
        var arrStr = document.cookie.split("; ");
        for(var i = 0;i < arrStr.length;i ++){
            var temp = arrStr[i].split("=");
            //alert(temp);
            if(temp[0] == NameOfCookie) 
                return unescape(temp[1]);
        }
        return "";
    }

    function AddTextCookie()
    {
        var data = document.getElementById("input_id1").value;
        addCookie("MY_Test_Text_Cookie",data,10);
    }

    function GetTextCookie()
    {
        document.getElementById("input_id2").value = getCookie("MY_Test_Text_Cookie");
    }

    function DelTextCookie()
    {
        delCookie("MY_Test_Text_Cookie");
    }
</script>
</head>
<body>
输入要添加到cookie的测试数据<input type="text" id="input_id1" />
<br />
<input type="button" onclick="AddTextCookie()" value="Add Text to Cookie" />
<br />
<input type="button" onclick="GetTextCookie()" value="Show Cookie Text" />
<br />
显示cookie数据<input type="text" id="input_id2" readonly="readonly" />
<br />
<input type="button" onclick="DelTextCookie()" value="Delete Cookie Data" />
</body>
</html>

可以用数据库存(一般不推荐),另外也可以用cookie存,这是最方便的。

1.localStorage对象存储
2.cookie 数组 存储
3.数据库存储
4.自己考虑

我自己写的小工具:localStorage 历史存储小工具
http://blog.csdn.net/swdenglian/article/details/52821814#comments