Web Storage

　　在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端保存诸如用户名等简单用户信息，但通过长期使用，人们发现用Cookies储存永久数据存在几个问题：

　　1、大小：Cookies的大小被限制在4kb

　　2、带宽：Cookies是随HTTP事务被一起发送的，因此会浪费一部分发送Cookies时使用的带宽。

　　3、复杂性：要正确操作Cookies是很困难的

　　针对以上问题HTML5重新提供了一个在客户端本地保存数据的功能，他就是Web Storage功能。顾名思义，Web Storage功能就是在web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：

　　1、sessionStorage：将数据保存在session对象中。session是指用户在某个浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

　　2、localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器存储</title>
</head>
<body>
    <script>
        function saveStorage(id){
            var target=document.getElementById(id);
            var str=target.value;
            sessionStorage.setItem("message",str);
        }
        function loadStorage(id) {
            var target=document.getElementById(id);
            var msg=sessionStorage.getItem("message");
            target.innerHTML=msg;
        }
        function saveStorage2(id) {
            var target=document.getElementById(id);
            var str=target.value;
            localStorage.setItem("message",str);
        }
        function loadStorage2(id) {
            var target=document.getElementById(id);
            var msg=sessionStorage.getItem("message");
            target.innerHTML=msg;
        }
    </script>
    <p id="msg"></p>
    <input type="text" id="input">
    <button onclick="saveStorage('input')">保存数据</button>
    <button  onclick="loadStorage('msg')">读取数据</button>
    <br/><br/>
    <input type="text" id="input2">
    <button onclick="saveStorage('input2')">本地保存数据</button>
    <button  onclick="loadStorage('msg2')">读取数据</button>
    <p id="msg2"></p>
    <br/><br/>

    <script>
           function saveStorage3(id) {
               var data=document.getElementById(id).value;
               var time=new Date().getTime();
               localStorage.setItem(time,data);
               alert("数据已经储存！");
               loadStorage3('msg3');
           }
        function loadStorage3(id) {
            var result="<table border='1'>";
            for(var i=0;i<localStorage.length;i++)
            {
                var key=localStorage.key(i);
                var value=localStorage.getItem(key);
                var date=new Date();
                date.setTime(key);
                result+="<tr><td>"+value+"</td><td>"+date+"</td></tr>";

            }
            result+="</table>";
            var target=document.getElementById(id);
            target.innerHTML=result;
        }
        function clearStorage() {
            localStorage.clear();
            alert("数据已经删除");
            loadStorage('msg3');
        }
    </script>
    <p id="msg3"></p>
    <textarea id="memo" cols="60" rows="10"></textarea>
    <br/>
    <button onclick="saveStorage3('memo')">追加数据</button>
    <button onclick="clearStorage()">删除数据</button>
</body>
</html>

 

posted @ 2016-07-20 21:04  Heroine.z  阅读(244)  评论(0)  编辑  收藏  举报