简易存储读取

cookie 永久存储有以下几个问题:

1大小:限制在4Kb
2带宽:cookie是随http一起发送的,会浪费带宽
3:复杂性:要正确操作cookie很困难

简单介绍下web storage:针对客户端存储数据的功能

分为 sessiongStorage(临时存储) 和 localStorage(永久存储)



<
table> <tr> <td>姓名</td> <td><input type="text" id="name"/></td>
</tr> <tr> <td>emall</td> <td><input type="text" id="email"/></td> </tr> <tr> <td>号码</td> <td><input type="text" id="tel"/></td> </tr> <tr> <td>备注</td> <td><input type="text" id="memo"/></td> </tr> <tr> <td></td> <td> <input type="button" value="保存" onclick="saveStorage();" /> </td> </tr> </table> <p> 检索:<input type="text" id="find" /> <input type="button" value="检索" onclick="findStorage('msg');"/> </p> <p id="msg"> </p>
<script>
        function saveStorage(){
            var data = new Object();//创建一个对象
            data.name = document.getElementById("name").value;//获取的值已创建对象属性的方式保存下来
            data.email = document.getElementById("email").value;
            data.tel = document.getElementById("tel").value;
            data.memo = document.getElementById("memo").value;

            var str = JSON.stringify(data);//将对象转换为json格式的字符串

            localStorage.setItem(data.name,str);//以key:velue形式存储
            console.log(msg)//空的p
        }
        function findStorage(id){
            var find = document.getElementById('find').value; //获取输入的key值
            var str = localStorage.getItem(find);//利用ley值将字符串取出来
            /*alert(find);*/
            var data = JSON.parse(str);//将数据转换为对象
            var result = "姓名:"+data.name+"<br>";//
            result+="email:"+data.email+"<br>";
            result+="tel"+data.tel+"<br>";
            result+="memo"+data.memo+"<br>";

            var target =document.getElementById(id);
            target.innerHTML = result;
            console.log(msg)//将数值放入id=msg的p中
        }
    </script>

 

posted @ 2017-04-27 17:23  小货盘啦  阅读(146)  评论(0编辑  收藏  举报