`

HTML5 Web Storage

阅读更多

体验了一下HTML5

在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 web storage 例子

    HTML5 Web Storage 是一种在浏览器端存储数据的技术,它提供了比传统Cookie更高效、容量更大的存储空间,使得网页可以离线存储数据并提高应用程序的性能。Web Storage 分为两种主要类型:Session Storage 和 Local ...

    HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage是现代网页应用中用于本地存储数据的关键特性,它解决了传统cookie技术的一些局限性,提供了更高效、安全的存储方式。WebStorage主要包含两种类型:localStorage和sessionStorage。 1. ...

    html5中的Web Storage

    HTML5中的Web Storage是网页应用用来在客户端存储数据的重要特性,它主要分为两种类型:sessionStorage和localStorage。这两种存储方式都是为了替代传统Cookie的局限性,提供更大的存储空间和更高效的本地数据管理。...

    HTML5高级程序设计

    从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...

    h5webstorage:Angular 2的Web存储

    适用于Angular2HTML5 WebStorage API (服务) (服务) (装饰器) (功能) 用 下载库: npm install h5webstorage --save 2.将模块和提供程序导入顶级模块: import { WebStorageModule } from "h5web...

    HTML5本地存储之Web Storage详解

    在HTML5中,Web Storage是一项重要的本地存储技术,它解决了传统cookie存在的诸多问题,如大小限制和不必要的网络传输。Web Storage分为两种类型:Session Storage和Local Storage,两者都是用来在用户的浏览器上...

    完整版《HTML5高级程序设计》5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》2

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...

    html5开发文档

    ### HTML5 WebStorage详解 #### 引言 随着互联网应用的日益丰富,用户对网站功能的需求也越发多样化,这促使了HTML5等新一代Web技术的诞生。其中,WebStorage是HTML5的重要特性之一,它提供了两种在客户端浏览器上...

    【ASP.NET编程知识】HTML服务器控件和WEB服务器控件的区别和联系介绍.docx

    * HTML5 WebStorage:HTML5 的本地存储技术,可以用于存储客户端的数据 * HTML Color Picker:一种 JavaScript 实现的拾色器效果,可以用于选择颜色 * Java 获取 html 中 Select,radio 多选的值方法:一种使用 Java ...

    HTML5高级程序设计.part5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》3

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part1

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part2

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part3

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5应用开发技术-Web Storage.pptx

    HTML5应用开发技术中,Web Storage是一个重要的特性,它提供了比传统Cookie更高效、容量更大的本地数据存储解决方案。Web Storage分为两种类型:localStorage和sessionStorage,它们都是为了解决浏览器端的数据存储...

    Web Storage.rar

    于是,Web Storage作为HTML5的一项重要特性应运而生,为开发者提供了更高效、更灵活的数据存储解决方案。 Web Storage分为两种类型:Session Storage和Local Storage。它们的主要区别在于数据的生命周期和作用范围...

Global site tag (gtag.js) - Google Analytics