国瑞个人博客
首页 > Html5+Css3 > localStorage仿站长工具的搜索框及其功能

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

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

 2018年08月25日 作者: 国瑞个人博客 250次浏览

自从建站之后,日日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的话,会更好写一些,感兴趣的小伙伴可以尝试一下哦!
百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《localStorage仿站长工具的搜索框及其功能》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/475.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 11 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
11

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780642 次
  • 最近更新: 2019年7月15日
-->