javascript本地化存储localStorage的实战用法

HTML

    
        
                
                    搜索 清除历史
                
    





    搜索历史

JS代码

    $(function () {
        update_history();
        // 绑定回车事件
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $("#search").click();
            }
        });

        // 搜索点击事件
        $("#search").click(function () {
            var keywords = $("#keywords").val();
            history(keywords); //添加到缓存
            update_history(); //更新搜索历史
        })

        // 清空搜索历史
        $("#empty").click(function () {
            mystorage.remove('keywords');
            $("#history").html(" ");
        })
    })

    /**
     * [update_history 更新搜索历史]
     * @return {[type]} [description]
     */
    function update_history() {
        //console.log(mystorage.get("keywords"));
        var history = mystorage.get("keywords");
        if (history) {
            var html = "";
            $.each(history, function (i, v) {
                html += "" + v + " "
            })
            $("#history").html(html);
        }
    }

    //获取历史记录传递到输入框;
    function getVal(i, v) {
        $(function () {
            $("#btn" + i).click(function () {
                $("#keywords").val(v);
            })
        })
    }

    /**
     * [history //搜索历史函数存储]
     * @param  {[type]} value [搜索词]
     * @return {[type]}       [description]
     */
    function history(value) {
        var data = mystorage.get("keywords");
        if (!data) {
            var data = []; //定义一个空数组
        } else if (data.length === 10) { //搜索历史数量
            data.shift();  //删除数组第一个元素有
        } else {

        }

        if (value) {  //判断搜索词是否为空
            if (data.indexOf(value)