html5本地缓存

javascript

浏览数:364

2019-1-7

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;
        }
        ul{
            list-style: none;
        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
    <li>没有搜索记录</li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="jquery.min.js"></script>
<script>
    $(function () {

        var historyListJson = localStorage.getItem('historyList') || '[]';
        var historyListArr = JSON.parse(historyListJson);
        /*获取到了数组格式的数据*/
        var render = function () {
            var html = '';
            historyListArr.forEach(function (item,i) {
                html += '<li><span>'+item+'</span><a data-index="'+i+'" href="javascript:;">删除</a></li>';
            });
            html = html || '<li>没有搜索记录</li>';
            $('ul').html(html);
        }
        render();

        $('[type="button"]').on('click',function () {
            var key = $.trim($('[type=search]').val());
            if(!key){
                alert('请输入搜索关键字');
                return false;
            }
            /*追加一条历史*/
            historyListArr.push(key);
            /*保存*/
            localStorage.setItem('historyList',JSON.stringify(historyListArr));
            /*渲染一次*/
            render();
            $('[type=search]').val('');
        });

        /*3.点击删除的时候删除对应的历史记录渲染列表*/
        $('ul').on('click','a',function () {
            var index = $(this).data('index');
            historyListArr.splice(index,1);
            localStorage.setItem('historyList',JSON.stringify(historyListArr));
            render();
        });

        /*4.点击清空的时候清空历史记录渲染列表*/
        $('div a').on('click',function () {
            historyListArr = [];
            //localStorage.clear();
            //localStorage.removeItem('historyList');
            localStorage.setItem('historyList','');
            render();
        });
    });
</script>
</body>
</html>