关于本地存储localStorage

最新推荐文章于 2024-06-21 14:29:11 发布

PHP__廊外诗鸽

最新推荐文章于 2024-06-21 14:29:11 发布

阅读量374

点赞数

分类专栏： Html

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
                <label for="sitename">网站名(key)：</label>
                <input type="text" id="sitename" name="sitename" class="text"/>
                <br/>
                <label for="siteurl">网 址(value)：</label>
                <input type="text" id="siteurl" name="siteurl"/>
                <br/>
                <input type="button" onclick="save()" value="新增记录"/>
                <hr/>
                <label for="search_phone">输入网站名：</label>
                <input type="text" id="search_site" name="search_site"/>
                <input type="button" onclick="find()" value="查找网站"/>
                <p id="find_result"><br/></p>
        </div>

        <script type="text/javascript">

                function save(){
                    if(window.localStorage){
                        var sitename=document.getElementById("sitename").value;
                        var siteurl=document.getElementById("siteurl").value;
                        localStorage.setItem(sitename,siteurl);
                        alert("添加数据成功！");
                    }else{
                        alert("no support storage!");
                    }
                }

                function find(){
                    var search_site=document.getElementById("search_site").value;
                    var sitename=localStorage.getItem(search_site);
                    var find_result=document.getElementById("find_result");
                    find_result.innerHTML=search_site+"的网址是："+sitename;
                }
        </script>

</body>
</html>