js——纯js实现分页效果 并storage保存页码（浏览器退出或刷新再进入还是上一次那页）

js部分：

        window.onload = function () {
            var find = document.getElementById('find');
            var btnFind = document.getElementById('btn_find');
            var btn = document.getElementById('btn').children;
            loadContent(10);

            function loadContent(num) {
                //获取基础数据
                var content = document.getElementById('content');
                var json = [
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢1</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢2</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢3</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'},
                    {content: '<tr><td>祝君岁月无波澜，敬己余生不悲欢4</td></tr>'}
                ];
                var text = '';

                //json内容不够时拼接json，防止盒子坍塌
                if (json.length % num !== 0) {
                    var sub = num - json.length % num;
                    for (var k = 0; k < sub; k++) {
                        var arr = [];
                        arr[k] = {content: '<tr><td></td></tr>'};
                        json = json.concat(arr[k]);
                    }
                }
                //获取总页数
                var allPage = Math.ceil(json.length / num);

                //按钮点击事件
                btnCheck(allPage, json, num);

                //将浏览器保存的页码传入
                var c;
                if (localStorage.getItem("c")) {
                    c = localStorage.getItem("c");
                    btn[1].innerText = localStorage.getItem("c");
                } else {
                    c = 1;
                }

                //预加载
                for (var i = (c - 1) * num; i < c * num; i++) {
                    text += json[i].content;
                    content.innerHTML = text;
                }
            }

            function btnCheck(allPage, json, num) {
                find.placeholder = '共 ' + allPage + ' 页';

                //翻页效果
                function change(json, num) {
                    var text = '';
                    var c = Number(btn[1].innerText);
                    for (var i = (c - 1) * num; i < c * num; i++) {
                        text += json[i].content;
                        content.innerHTML = text;
                    }
                    //浏览器保存页码
                    localStorage.setItem('c', c);
                }

                //页码转换效果
                //查找
                btnFind.onclick = function () {
                    if (Number(find.value) >= allPage) {
                        btn[1].innerText = allPage;
                    } else if (Number(find.value) <= 1) {
                        btn[1].innerText = 1;
                    } else {
                        btn[1].innerText = find.value;
                    }
                    find.value = '';
                    change(json, num);
                };
                //下一页
                btn[2].onclick = function () {
                    if (Number(btn[1].innerText) < allPage) {
                        btn[1].innerText = Number(btn[1].innerText) + 1;
                    }
                    change(json, num);
                };
                //上一页
                btn[0].onclick = function () {
                    if (Number(btn[1].innerText) > 1 && Number(btn[1].innerText) <= allPage) {
                        btn[1].innerText = Number(btn[1].innerText) - 1;
                    }
                    change(json, num);
                };
            }
        }

css部分：

	   /*clear style*/
        html {
            color: #000;
            background: #FFF
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0
        }

        table {
            border-spacing: 0
        }

        fieldset, img {
            border: 0
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal
        }

        ol, ul {
            list-style: none
        }

        caption, th {
            text-align: left
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal
        }

        q:before, q:after {
            content: ''
        }

        abbr, acronym {
            border: 0;
            font-variant: normal
        }

        sup {
            vertical-align: text-top
        }

        sub {
            vertical-align: text-bottom
        }

        input, textarea, select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            *font-size: 100%
        }

        legend {
            color: #000
        }

        a {
            text-decoration: none
        }

        /*start*/
        table {
            margin: 100px auto;
            text-align: center;
            background-color: #333;
            color: #eee;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 10px 10px 60px 2px black;
        }

        thead td {
            padding-bottom: 20px;
            font-size: 30px;
        }

        /*规定内容大小*/
        tbody td {
            width: 350px;
            height: 40px;
            font-size: 20px;
            padding-bottom: 10px;
        }

        tbody tr:last-child td {
            padding-bottom: 30px;
        }

        tfoot tr:first-child td ul {
            width: 100%;
            height: 40px;
            float: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
        }

        tfoot tr:first-child td ul li {
            border-radius: 10px;
            padding: 10px;
            background-color: #444;
            user-select: none;
            margin-left: 10px;
        }

        tfoot tr:first-child td ul li:hover {
            background-color: #666;
        }

        tfoot tr:last-child td input {
            margin-top: 20px;
            border-radius: 10px;
            height: 30px;
            outline: none;
            border: none;
        }

        tfoot tr:last-child td input:first-child {
            margin-right: 10px;
            text-align: center;
        }

        tfoot tr:last-child td input:first-child::placeholder {
            color: #ccc;
        }

        tfoot tr:last-child td input:last-child {
            width: 80px;
            background-color: #222;
            color: whitesmoke;
        }

        tfoot tr:last-child td input:last-child:hover {
            background-color: #777;
        }

html部分：

<table>
    <thead>
    <tr>
        <td>分页</td>
    </tr>
    </thead>

    <tbody id="content">
    </tbody>

    <tfoot>
    <tr>
        <td>
            <ul id="btn">
                <li>上一页</li>
                <li>1</li>
                <li>下一页</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td id="search">
            <input type="number" placeholder="" id="find">
            <input type="button" value="查找" id="btn_find">
        </td>
    </tr>
    </tfoot>
</table>