localStorage仿站长工具的搜索框及其功能

6

自从建站之后,日日site,偶有用到站长工具的查询,发现它的搜索框还是很有个性的,猜想中应该用到了localStorage,几天我就尝试着做了一下,基本效果还是达到了(只能说是相似…

自从建站之后,日日site,偶有用到站长工具的查询,发现它的搜索框还是很有个性的,猜想中应该用到了localStorage,几天我就尝试着做了一下,基本效果还是达到了(只能说是相似,哈哈哈)

Html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input {
            box-sizing: border-box;
            width: 400px;
            height: 50px;
            padding: 3px;
        }

        button {
            width: 100px;
            height: 50px;
            cursor: pointer;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            height: 50px;
            margin: 50px auto;
        }

        ul {
            width: 80%;
            height: auto;
        }

        li {
            width: 100%;
            height: auto;
            text-align: left;
            line-height: 40px;
            box-sizing: border-box;
            border: 1px solid black;
            padding: 3px;
            margin-top: -1px;
        }

        span {
            background: rgb(85, 167, 227);
            width: 60px;
            height: 100%;
            text-align: center;
            display: inline-block;
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" placeholder="请输入网址" id="text">
        <button name=""  id="go" >提交</button>
        <ul id="add">
        </ul>
    </div>

</body>

</html>

Javascript部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script type="text/javascript">
    //检测浏览器是否支持localStorage
    if (typeof localStorage === "undefined") {
        window.alert('不支持');

    } else {
        console.log('支持');
    }
    let data = [];
    if (GetData('data') != 0) {
        data.push(GetData('data'));
    }
    function GetData(key) {
        let str = '<li>+保存输入框中的网址</li>';
        add.innerHTML = str;
        let val = window.localStorage.getItem(key);
        if (val == '') {
            return 0;
        };
        if(val == null){   //兼容谷歌,谷歌获取到的val值在空的情况下为null
            return 0;
        }
        console.log(val);
        let arr = val.split(',');   //360不报错  谷歌报错

        //生成元素
        arr.forEach((item, index) => {
            if (arr.length != 0)
                str += `<li><span id="del" onclick=remove(` + index + `)>删除</span>` + item + `</li>`;
        })
        add.innerHTML = str;
        console.log(str);
        return arr;
    }

    function SetData(key, value) {
        window.localStorage.setItem(key, value);
    }

    function remove(index) {
        console.log('inde===' + index);
        data.splice(index, 1);
        //同步更新
        SetData('data', data);
        GetData('data');
    }

    go.onclick = function () {
        if (text.value == '') {
            alert('输入不能为空');
            return false;
        }

        let flag = true; //设置变量判断是否已经保存过了
        //保存不能重复
        let txt = text.value;
        data.forEach(item => {
            console.log("item=" + item);
            if (txt == item) {
                alert('该值您已经保存过了');
                flag = false;
            }
        })
        text.value = '';
        if (flag) {
            data.unshift(txt.split(','));  //每次插入的数都在最前方
            SetData('data', data);
            GetData('data');
        };

    }

    // try {} catch (err) {}  检查有错误的地方
</script>
注意:这里我使用原生写的,如果用vue的话,会更好写一些,感兴趣的小伙伴可以尝试一下哦!

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注