HTML5 Web存储(Web Storage)技术以及用法

      使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

      Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:

  • 提供一种在cookie之外存储会话数据的途径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

     Web Storage又分为两种: sessionStorage 和localStorage ,即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地; 不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例): 
  • 保存数据:localStorage.setItem(key,value); 
  • 读取数据:localStorage.getItem(key); 
  • 删除单个数据:localStorage.removeItem(key); 
  • 删除所有数据:localStorage.clear(); 
  • 得到某个索引的key:localStorage.key(index); 
      如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。 
1、sessionStorage对象
      sessionStorage对象存储特定于某个对话的数据,也就是它的生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可以可用(注意:Firefox和Weblit都支持,IE则不行)。
      因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制。
接下来写一个简单的例子说明说如何使用的。
代码如下:
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>HTML5--Web存储SessionStorage</title>
        <script type="text/javascript">
            window.onload = function()
            {
                alert("当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,将不会显示任何数据,刷新页面无效。\r\n由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。")

                //首先获得body中的3个input元素
                var msg = document.getElementById("msg");
                var getData = document.getElementById("getData");
                var setData = document.getElementById("setData");

                setData.onclick = function()//存入数据
                {
                    if(msg.value) {
                        sessionStorage.setItem("data", msg.value);
                        alert("信息已保存到data字段中");
                    } else {
                        alert("信息不能为空");
                    }
                };

                getData.onclick = function()//获取数据
                {
                    var msg = sessionStorage.getItem("data");
                    if(msg) {
                        alert("data字段中的值为:" + msg);
                    } else {
                            alert("data字段无值!");
                    }
                }
            }
        </script>
</head>

<body>
    <input id="msg" type="text" placeholder="请输入要保存的数据"/>
    <input id="setData" type="button" value="保存数据"/>
    <input id="getData" type="button" value="获取数据"/>
</body>
</html>
效果:

注意:
     当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,将不会显示任何数据,刷新页面无效。由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。

     不同浏览器写入数据方法略有不同。Firefox和Webkit实现了同步写入,所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据,所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。

     我们还可以通过结合length属性和key()方法来迭代sessionStorage中的值。首先是通过key()方法获取指定位置上的名字,然后再通过getItem()方法找出对应名字的值。
     我同样写一个例子。
代码如下:
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML5 Web Storage</title>
    <style>
        .box{
            width:320px;
            border: 1px solid #000000;
            padding: 10px 10px;
        }
        .text{
            margin-top:5px;
            margin-bottom:5px;
            width: 200px;
            height: 20px;
        }
        .addBtn,.searchBtn,.loadBtn{
            border: 1px solid #00A2E9;
            background-color: #66d3ff;
            padding: 5px 10px;
            font-size: 14px;
        }
        #list{
            background-color:#8ad6ff;
            display: none;
            margin-top: 10px;
        }
        td,tr{
            list-style: none;
        }
    </style>
</head>
<body>
<div class="box">
    <form id="myForm">
        <!--姓名-->
        <label for="userName">姓  名:</label>
        <input type="text" id="userName" name="userName" class="text"/><br/>

        <!--手机号码-->
        <label for="mobilephone">手机号码:</label>
        <input type="text" id="mobilephone" name="mobilephone" class="text"/><br/>

        <input class="addBtn" type="button" οnclick="save()" value="新增记录"/>
    </form>

    <!--查找机主-->
    <hr/>
    <label for="search_phone">输入手机号:</label>
    <input type="text" id="search_phone" name="search_phone" class="text"/>

    <input class="searchBtn" type="button" οnclick="find()" value="查找机主"/>
    <p id="find_result"><br/></p>

    <!--显示所有的信息-->
    <input type="button" οnclick="loadAll()" value="显示所有的信息" class="loadBtn">
    <div id ="list"></div>
</div>

</body>
<script>
    function save(){
        var mobilephone = document.getElementById("mobilephone").value;
        var userName = document.getElementById("userName").value;
        var myForm = document.getElementById("myForm");
        sessionStorage.setItem(mobilephone,userName);
        myForm.reset();
    }

    //查找数据
    function find(){
        var search_phone = document.getElementById("search_phone").value;
        var name = sessionStorage.getItem(search_phone);
        var find_result = document.getElementById("find_result");
        find_result.innerHTML = search_phone + "的机主是:" + name;
    }

    //将所有存储在localStorage中的对象提取出来,并展现到界面上
    function loadAll(){
        var list = document.getElementById("list");
        if(sessionStorage.length>0){
            list.style.display="block";
            var result = "<table border='1'>";
            result += "<tr><td>姓名</td><td>手机号码</td></tr>";
            for(var i=0;i<sessionStorage.length;i++){
                var mobilephone = sessionStorage.key(i);
                var name = sessionStorage.getItem(mobilephone);
                result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
            }
            result += "</table>";
            list.innerHTML = result;
        }else{
            list.innerHTML = "目前数据为空,赶紧开始加入联系人吧";
        }
    }
</script>
</html>
效果:

     除了使用案例中的遍历方法之外,也可以使用for-in循环来迭代sessionStorage中的值:
for(var key in sessionStorage){
     var value = sessionStorage.getItem(key);
     console.log(key + "=" + value);
}
2、localStorage 对象
  
     localStorage一直将数据保存在客户端本地。localStorage 和sessionStorage的用法相似,这里就不做详细的说明。
     

  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值