HTML5 Web Storage

体验了一下HTML5 Web Storage               Good ,很方便,很实用...

在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能就是可以在客户端本地保存数据的Web Storage功能,我们知道,在HTML4中可以使用Cookies在客户端保存诸如用户名等等简单的用户信息,但是长期的实际使用下来,人发现用Cookie储存永久数据存在以下问题:

大小:cookies的大小被限制在4K。
带宽:cookies是随HTTP事务一起被发送的,因此会浪费一部分发送cookie时使用的带宽。
复杂性:要正确地操纵cookie是很困难的。

在这种情况下,在HTML5中重新提供了一种在客户端本地保存数据的功能,它就是Web Storage功能。

Web Storage 分两种:sessionStorage & localStorage

sessionStorage 随着浏览器闭关而清除

localStorage 永久保存

看例子:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Web Storage</title>

<style type="text/css">

*{font-family:Arial;}

.wrap{width:500px; margin:auto}

label{display:block; margin:10px}

table td,table th{padding:5px;}



.showData{width:300px}

.title{border:1px solid #CCC; border-bottom:0; background:#DDD;}

.contentList{border:1px solid #CCC; border-top:none}



.tip{height:30px; line-height:30px;}

.name,.tel,.age{line-height:30px; height:30px; display:inline-block; *display:inline; *zoom:1;  text-indent:5px;}

.name{width:30%;}

.tel{width:40%;}

.age{width:30%}



</style>

<script type="text/javascript" src="js/public.js"></script>

<script type="text/javascript">

function $(id) {

    return document.getElementById(id);

}

function tip(str, t, bb, c) {



    var b = bb || true;

    var time = t || 2000;

    var tip = $('tip');

    tip.setAttribute("class", '');

    tip.style.display = 'block';

    if (c) {

        tip.className = c;

    }



    tip.innerHTML = str;

    if (b) {

        setTimeout(function () {

            tip.className = '';

            tip.style.display = 'none';

        }, time);

    }

}

//存储数据

function saveStoage() {

    var datas = {};

    datas.name = $("name").value;

    datas.tel = $("tel").value;

    datas.age = $("age").value;

    if (!datas.name || !datas.tel || !datas.age) {

        tip("内容不能为空!");

        return;

    }

    var dataStr = JSON.stringify(datas);

    localStorage.setItem(datas.name, dataStr);

    showData();

    tip("数据已经保存");

}

//显示数据

function showData() {

    var tab = $("showData");

    var str = '<div class="title"><span class="name">姓名</span><span class="tel">电话</span><span class="age">年龄</span></div>';

    for (var i = 0; i < localStorage.length; i++) {

        var key = localStorage.key(i);

        var data = JSON.parse(localStorage.getItem(key));

        str += '<div class="contentList"><span class="name">' + key + '</span><span class="tel">' + data.tel + '</span><span class="age">' + data.age + '</span></div>';

    }

    tab.innerHTML = str;

    $("num").innerHTML = '共有' + localStorage.length + '个联系人';

}

//清除所有数据

function clearStoage() {

    if (confirm("确定要清除所有数据吗?")) {

        localStorage.clear();

        showData();

        tip("数据消除成功!");

    }

}



window.addEventListener("load", function () {

    if (!localStorage) {

        return;

    }

    showData();

    $('add').addEventListener('click', saveStoage);

    $("clear").addEventListener('click', clearStoage);



});

</script>

</head>

<body>

<div id="wrap" class="wrap">

    <h1>WebStorage</h1>

    <p id="msg"></p>    

    <label for="name">名称:<input type="text" name="name" id="name" value="" /></label>

    <label for="tel">电话:<input type="text" name="tel" id="tel" /></label>

    <label for="age">年龄:<input type="text" name="age" id="age" /></label>

    <input type="button" value="添加联系人" id="add"/>

    <input type="button" value="清除数据"  id="clear" />    

    <div id="tip" class="tip"></div>

    <div id="num"></div>

    <div id="showData" class="showData"></div>

</div>

</body>

</html>

 

 

 

 

 

 

 

 

你可能感兴趣的:(html5)