HTML5 Web存储（Web Storage）技术以及用法

最新推荐文章于 2024-05-17 03:16:49 发布

Wendy-lxq

最新推荐文章于 2024-05-17 03:16:49 发布

阅读量8.9k

点赞数 7

分类专栏： HTML & HTML5 文章标签： html5 存储 web storage

本文链接：https://blog.csdn.net/u010297791/article/details/56667150

版权

HTML & HTML5 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

使用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的用法相似，这里就不做详细的说明。

Wendy-lxq

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
HTML5 Web存储（Web Storage）技术以及用法

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

扫一扫

专栏目录