本地存储 - Web Storage 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
    HTML5中使用WebStorage与本地数据库来实现本地存储,不再使用cookie

    使用cookie的缺陷:
        大小限制在4KB
        cookie随http事务一起发送,占用带宽
        正确操纵比较复杂

    WebStorage分为两种
        sessionStorage:从浏览器打开到关闭的范围内有效
        localStorage:即使浏览器关闭了也有效(同一个浏览器)
    -->
    <h1>Web Storage演示</h1>
    <p id="msg"></p>
    <input type="text" id="input" />
    <input type="button" value="保存数据" onclick="sessionSave('input')" />
    <input type="button" value="读取数据" onclick="sessionLoad('msg')" />
    <script type="text/javascript">
        function sessionSave(id){
            var target = document.getElementById(id);
            var str = target.value;
            sessionStorage.setItem("message",str);
        }
        function sessionLoad(id){
            var target = document.getElementById(id);
            var msg = sessionStorage.getItem("message");
            target.innerHTML = msg;
        }
        function localSave(id){
            var target = document.getElementById(id);
            var str = target.value;
            localStorage.setItem("message",str);
        }
        function localLoad(id){
            var target = document.getElementById(id);
            var msg = localStorage.getItem("message");
            target.innerHTML = msg;
        }
        function localCLear(){
            localStorage.clear();
            alert("已清空");
        }
//        上面的例子比较简单,如果要保存的数据比较复杂,则可以使用JSON格式
        function  savePerson(id,name){
            var person = new Object();
            person.id = document.getElementById(id).value;
            person.name = document.getElementById(name).value;
            //对象转字符串
            var personStr = JSON.stringify(person);
            localStorage.setItem(person.id,personStr);
        }
        function localPerson(id){
            var personStr = localStorage.getItem(id);
            //字符串转对象
            var person = JSON.parse(personStr);
            var id = person.id;
            var name = person.name;
        }
    </script>
</body>
</html>

 

posted @ 2016-07-25 19:04  csnmd  阅读(230)  评论(0)    收藏  举报