HTML5本地存储之Web Storage篇

最新推荐文章于 2020-10-14 11:10:11 发布

黎成诃月

最新推荐文章于 2020-10-14 11:10:11 发布

阅读量205

点赞数

分类专栏：前端-javaScript

本文链接：https://blog.csdn.net/weixin_40292626/article/details/81509680

版权

前端-javaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</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" οnclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" οnclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
loding()
function save(){
       var name =document.getElementById('sitename').value;
       var url =document.getElementById('siteurl').value;
       var a =localStorage.setItem(name,url);
   }
   function find(){
       var search_name=document.getElementById('search_site').value;
       var search_url=localStorage.getItem(search_name);
       var find_result=document.getElementById('find_result');
       find_result.innerHTML= search_name+'的网址是：'+search_url;
       console.log(find_result.innerHtml)
   }
   function loding(){
       var list=document.getElementById('list');
           if(sessionStorage.length>0){
           var result="";
           result +='<table border=1>'
       result +='<tr><td>网站</td><td>网站的网址</td></tr>'
               for(var i=0;i<localStorage.length;i++){

               result +='<tr>'
               var aaa= localStorage.key(i);
               console.log(aaa)
               var zzz=localStorage.getItem(aaa)
               console.log(zzz)
               // result +="<td>"+aaa+"</td>"
// result +="<td>"+zzz+"</td>"
result +="<td>"+aaa+"</td><td>"+zzz+"</td>"

result +='</tr>'
}
        result +='</table>'
    list.innerHTML =result;
           }else{
               list.innerHTML = "数据为空……";
           }

}

</script>
</body>
</html>