vue 实现 input存储最多10个的输入值

205

更新于 2019-01-04

✓ 已被采纳

实现功能，只有点击搜索以后的搜索条件保存，只展示10条；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorege</title>
</head>
<body>
    <input id="box-input" type="text" />
    <button id="btn">search</button>
    <div id="search-list"></div>
</body>
<script type="text/javascript">
    window.onload = function(){
        localStorage.clear();
        var vla = document.getElementById("box-input"),
            btn = document.getElementById("btn"),
            searchList = document.getElementById("search-list");
        btn.onclick = function(){
            var result = [];
            var isResult = JSON.parse(localStorage.getItem("resultArr"));
            if(!!isResult){
                result = result.concat(isResult)
            };
            if(!!vla.value){
                result.unshift(vla.value);
            };
            localStorage.setItem("resultArr", JSON.stringify(result))
        };
        vla.onfocus = function(){
            var isResult = JSON.parse(localStorage.getItem("resultArr"));
            if(!!isResult){
                var max = "";
                if(isResult.length>9){
                    max = 10
                }else{
                    max = isResult.length
                };
                for (var i=0; i<max; i++){
                    var p = document.createElement("p");
                    p.innerHTML = isResult[i]
                    searchList.appendChild(p)
                }
            }
        };
        vla.onblur = function(){
            var childs = searchList.childNodes;
            for(var i = childs .length - 1; i >= 0; i--) {
                searchList.removeChild(childs[i]);
            }
        }
    }
</script>
</html>

Mure

167

发布于 2019-01-04

检查 input 是否有加 name

君不见

12

发布于 2019-01-04

Gady

35

发布于 2019-01-04

不妨自己写一个，每次搜索都往本地存一下，还兼容各大浏览器