【html5】Web Storage本地存储 sessionStorage/localStorage

1.sessionStorage

        ·将数据保存在session对象中，保存时间和session的生命周期紧密相连，为临时保存

        ·简单示例

页面

<h2>大量数据测试</h2>
    <table>
        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
        <tr><td>email：</td><td><input type="text" id="email"></td></tr>
        <tr><td>备注：</td><td><input type="text" id="remark"></td></tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" οnclick="save();"></td>
        </tr>
    </table>
    <p>检索：<input type="text" id="find">
        <button οnclick="find('msg')">检索</button>
    </p>
    <p id="msg"></p>

js方法

 function save(){
            var obj = new Object();
            obj.name = document.getElementById("name").value;
            obj.email = document.getElementById("email").value;
            obj.remark = document.getElementById("remark").value;
            var json = JSON.stringify(obj);//对象转为json数据
            sessionStorage.setItem(obj.name,json);
        }
        function find(id){
            var find = document.getElementById("find").value;
            var str = sessionStorage.getItem(find);
            var obj = JSON.parse(str); //json转为对象
            var result = "姓名"+obj.name+"<br>"
                    +"email"+obj.email+"<br>"
                    +"remark"+obj.remark+"<br>";
            var target = document.getElementById(id);
            target.innerHTML = result;
        }

2.localStorage

        ·将数据保存在客户端本地的硬件设备中，即使浏览器关闭，该数据仍然存在，为永久保存

        ·简单示例

js方法

 function save(){
            var obj = new Object();
            obj.name = document.getElementById("name").value;
            obj.email = document.getElementById("email").value;
            obj.remark = document.getElementById("remark").value;
            var json = JSON.stringify(obj);
            localStorage.setItem(obj.name,json);
        }
        function find(id){
            var find = document.getElementById("find").value;
            var str = localStorage.getItem(find);
            var obj = JSON.parse(str);
            var result = "姓名"+obj.name+"<br>"
                    +"email"+obj.email+"<br>"
                    +"remark"+obj.remark+"<br>";
            var target = document.getElementById(id);
            target.innerHTML = result;
        }