简易存储读取

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>

简易存储读取

相关推荐