html5 webstorage做简易数据库

在这里插入代码片
<div class="shuru">
    <ul>
        <li><span>姓名：</span><input type="text" id="name" placeholder="请输入姓名..." /></li>
        <li><span>邮箱：</span><input type="email" id="email"placeholder="邮箱..."/></li>
        <li><span>电话：</span><input type="text" id="phone" placeholder="电话号码..."/></li>
        <li><span>备注：</span><input type="text" id="beizhu" placeholder="备注"/></li>
        <li><input type="button" value="保存" onclick="bc()"></li>
    </ul>
</div>
<div class="jiansuo">
    <ul class="u">
        <li><span>检索：</span><input  id="js" type="text" placeholder="请输入姓名" />
            <input type="button" value="检索" onclick="js()"/>
        </li>
        <li id="result"></li>
    </ul>
</div>
<script>
    function bc(){
        var person={};
        person.name=document.getElementById("name").value;
        person.email=document.getElementById("email").value;
        person.phone=document.getElementById("phone").value;
        person.beizhu=document.getElementById("beizhu").value;
        var p=JSON.stringify(person);
        localStorage.setItem(person.name,p);//存入字符串 键 值
        //删除缓存 locaStorage.removeItem(key)
        //locaStorage.clear();
    }
    function js(){
        var k=document.getElementById("js").value;
        var m=JSON.parse(localStorage.getItem(k));
        var re=document.getElementById("result");
        var r="姓名："+ m.name+'<br>';
        r+="邮箱："+ m.email+'<br>';
        r+="电话："+ m.phone+'<br>';
        r+="备注："+ m.beizhu;
        re.innerHTML=r;
     }