页面刷新列表内容不丢失

Question

我写了一个搜索的功能，功能已经实现了

但是刷新的时候页面就变成

之前搜索的内容就没了，现在想刷新的时候还是之前搜索的内容，我是想弄个刷新事件，然后刷新的时候执行搜索的事件

，但是百度了下jq的刷新没什么好的方法，兼容性问题很大，所以是不是我的方法有问题

，还是有什么好的方法可以解决；
具体代码如下：
html：

<form action="" method="get">
            <div>
                <a class="close-btn" href="javascript:;"><img src="images/icon/close.png" alt="" /></a>
            </div>
            <div class="search-div search-div-en">
                <input class="search-input" type="text">
                <span class="search-sub">搜&nbsp索</span>
                <select class="select-div">
                    <option class="option-btn1">手机</option>
                    <option class="option-btn2">终端</option>
                </select>
                
            </div>
        </form>

js:

$(".search-sub").on('click',function(){
        var value = $.trim($(".search-input").val());
        var pageSize = 20;
        var pageNum = 1;
        //下拉选中的option值
        var sel_value = $('.select-div option:selected').text(); //选中的文本
        if(value == ""||value==null) {
            $(".toatl").html("0"); //搜索结果为0
            $(".list-ul").html(""); //列表置空
            $(".wrap-lists-middle").hide(); //暂无图标
            $(".search-init img").hide(); //初始化图标
            $(".wrap-lists p").hide();//搜索提示
            $("#pagination1").hide(); //分页隐藏
        } else {
            if(sel_value == "终端") {
                var dataUrl = "/LuceneSearch/search/devicepages"
                var ptype = 1;
                $("#pagination1").html("");
            } else if(sel_value == "手机") {
                var dataUrl = "/LuceneSearch/search/phonepages"
                var ptype = 0;
            }
            $.ajax({
                url: dataUrl,
                type: 'get',
                data: {
                    keyword: value,
                    pageNum: pageNum,
                    pageSize: pageSize,
                    language:sel_value
                },
                dataType: 'json',
                success: function(data) {
                    $(".toatl").html(data[0]["total"]); //搜索数
                    var pageTotal = Math.ceil(data[0]["total"] / pageSize); // 总页数 =总结果数/页面大小数
                    var str = '';
                    var words = data[0]["result"]; //结果数
                    var value = $(".search-input").val(); //输入框值
                    if(words.length == undefined || words.length == 0) {
                        $(".toatl").html('0'); 
                        $(".list-ul").html(""); 
                        $(".wrap-lists-middle").show(); //暂无图标
                        $(".wrap-lists p").show();//搜索结果提示
                        $(".search-init img").hide();
                        $("#pagination1").hide();//分页隐藏
                    } else {
                        for(var i = 0; i < words.length; i++) {
                            var typestr = "http://products.chinamobiledevice.com/detailCN/" + words[i].searchUuid + "/" + ptype;
                            str += '<li><a href="' + typestr + '" target="_blank"><img src="' + words[i].searchDrawing + '" alt="暂无图片"/><p class="des-p" title="' + words[i].searchProfile+ '">' + words[i].searchProfile+ '</p></a><div class="border-ddd"></div></li>';
                            $(".list-ul").html(str);
                            $(".wrap-lists-middle").hide();
                            $(".wrap-lists p").show();//搜索结果提示
                            $(".search-init img").hide();
                            $("#pagination1").show();//分页显示
                        }
                    }
                    $.jqPaginator('#pagination1', {
                        totalPages: pageTotal,
                        visiblePages: pageTotal,
                        currentPage: 1,
                        onPageChange: function (num, type) {
                            aJax(num,20);
                        }
                    });    
                    
                }
            })
        }
      
    })

Answer 1

你要刷新的时候还要保存搜索的值，可以把刷新的值放到url上，但是这样就要搜索都要刷新页面了，如果用的是ajax搜索的话，可以在url上加上锚点记一下搜索的内容，等页面加载的时候从锚点上查到搜索的值，放到文本框中，然后在执行搜索

Answer 2

这个只能做（localStorage或者sessionStorage）缓存，有以下两种方式：

1. 搜索结果做缓存：把搜索到的数据存到本地中，每次页面加载的时候去获取本地的搜索结果。
2. 搜索条件做缓存：把搜索条件缓存到本地，每次页面加载的时候去发起一次搜索。

ps: 用createElement和append的方式插入元素会比较好

Answer 3

建议将搜索的关键字存入localStorage或者sessionStorage中，然后在页面加载的时候，从里面取出数据，如果数据不为空，触发一次搜索动作

Answer 4

把你的这些参数

if(sel_value == "终端") {
    var dataUrl = "/LuceneSearch/search/devicepages"
    var ptype = 1;
    $("#pagination1").html("");
} else if(sel_value == "手机") {
    var dataUrl = "/LuceneSearch/search/phonepages"
    var ptype = 0;
}
data: {
    keyword: value,
    pageNum: pageNum,
    pageSize: pageSize,
    language:sel_value
}

拼成url，可以直接访问的形式，然后location.href即可

Answer 5

我觉得你发ajax请求的时候应该把参数带到url后，也就是浏览器上，这样你点f5
的时候就不会没有了。
也就是把keyword带到dataurl后面，其余的参数放到data里面。
不知道这样可不可以

if(sel_value == "终端") {
                var dataUrl = "/LuceneSearch/search/devicepages?keyword="+value;
                var ptype = 1;
                $("#pagination1").html("");
            } else if(sel_value == "手机") {
                var dataUrl = "/LuceneSearch/search/phonepages?keyword="+value;
                var ptype = 0;
            }
            $.ajax({
                url: dataUrl,
                type: 'get',
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    language:sel_value
                },