本文主要包含HTML5教程,HTML5中国,HTML5本地存储之Web Storage篇,html5cn,html5资料,html5等相关知识,匿名希望在学习及工作中可以帮助到您
Web
Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web
Storage官方建议为每个网站5MB。
Web Storage又分为两种：
- sessionStorage
- localStorage
从字面意思就可以很清楚的看出来，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只能操作字符串。
接下来，我们通过Web Storage开发一个简单的通讯录小程序，以演示相关API的使用方法；我们要实现如下功能：
- 录入联系人，联系人有姓名、手机号码2个字段，以手机号作为key存入localStorage；
- 根据手机号码，查找机主；
- 列出当前已保存的所有联系人信息；
首先，准备一个简单的HTML页面，如下：
- >
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>HTML5本地存储之Web Storage篇title>
- head>
- <body>
- <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
- <label for="user_name">姓名：label>
- <input type="text" id="user_name" name="user_name" class="text"/>
- <br/>
- <label for="mobilephone">手机：label>
- <input type="text" id="mobilephone" name="mobilephone"/>
- <br/>
- <input type="button" onclick="save()" value="新增记录"/>
- <hr/>
- <label for="search_phone">输入手机号：label>
- <input type="text" id="search_phone" name="search_phone"/>
- <input type="button" onclick="find()" value="查找机主"/>
- <p id="find_result"><br/>p>
- div>
- <br/>
- <div id="list">
- div>
- body>
- html>
HTML5本地存储之Web Storage篇</titl
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-3021903444118463"
data-ad-slot="2749611331"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<!--endmain-->
<div class="art_xg">
<h4>您可能想查找下面的文章:</h4><ul>
<li><a href="/web_design/html5/20178/158968.html" title="一款利用html5和css3动画排列人物头像的实例演示" target="_blank">一款利用html5和css3动画排列人物头像的实例演示</a></li><li><a href="/web_design/html5/20178/159086.html" title="html5教程调用绘图api画简单的圆形代码分享" target="_blank">html5教程调用绘图api画简单的圆形代码分享</a></li><li><a href="/web_design/html5/20178/159087.html" title="html5教程画矩形代码分享" target="_blank">html5教程画矩形代码分享</a></li><li><a href="/web_design/html5/20178/159088.html" title="html5教程制作简单画板代码分享" target="_blank">html5教程制作简单画板代码分享</a></li><li><a href="/web_design/html5/20178/159116.html" title="html5基础教程常用技巧整理" target="_blank">html5基础教程常用技巧整理</a></li><li><a href="/web_design/html5/201712/174450.html" title="html5教程-Canvas入门" target="_blank">html5教程-Canvas入门</a></li><li><a href="/web_design/html5/201812/246425.html" title="html5教程画矩形代码分享" target="_blank">html5教程画矩形代码分享</a></li><li><a href="/web_design/html5/201812/246938.html" title="HTML5晃动DeviceMotionEvent事件" target="_blank">HTML5晃动DeviceMotionEvent事件</a></li><li><a href="/web_design/html5/201812/246956.html" title="HTML5教程之html 5 本地数据库（Web Sql Database）" target="_blank">HTML5教程之html 5 本地数据库（Web Sql Database）</a></li><li><a href="/web_design/html5/201812/247491.html" title="HTML5中对contenteditable属性的解释与规定" target="_blank">HTML5中对contenteditable属性的解释与规定</a></li>
</ul>
</div>
<div class="relatedarticle clearfix mt5">
<H2>相关文章</H2>
<ul>
<li><span>2017-08-06</span><a href="/web_design/html5/20178/159372.html" title="HTML5的结构和语义(5):内嵌媒体" target="_blank">HTML5的结构和语义(5):内嵌媒体</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/247186.html" title="在移动端上，JS如何能知道浏览器已经被切换到后台了？" target="_blank">在移动端上，JS如何能知道浏览器已经被切换到后台了？</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/246511.html" title="详细介绍7 款超具个性的 HTML5 播放器的图文详解" target="_blank">详细介绍7 款超具个性的 HTML5 播放器的图文详解</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/247328.html" title="怎么评价国产框架MUI跟ReactNative的对比帖?" target="_blank">怎么评价国产框架MUI跟ReactNative的对比帖?</a></li><li><span>2017-08-06</span><a href="/web_design/html5/20178/158867.html" title="移动端html5 meta标签的神奇功效" target="_blank">移动端html5 meta标签的神奇功效</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/246672.html" title="HTML5拖放效果的实现代码 " target="_blank">HTML5拖放效果的实现代码 </a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/247576.html" title="HTML5 Canvas 起步(2)-路径" target="_blank">HTML5 Canvas 起步(2)-路径</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/246988.html" title="canvas在浏览器里的渲染原理？" target="_blank">canvas在浏览器里的渲染原理？</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/245147.html" title="在H5页面中怎样调用APP" target="_blank">在H5页面中怎样调用APP</a></li><li><span>2018-12-03</span><a href="/web_design/html5/201812/248222.html" title="分享全球十款超强HTML5开发工具_html5教程技巧" target="_blank">分享全球十款超强HTML5开发工具_html5教程技巧</a></li>
</ul>
</div>
</div>
</div><!--endborder-->
<!--end fr-->
<div class="w300 fr">
<div class="subcate bord">
<div class="asidetit cl"><h3>文章分类</h3></div>
<div class="subcatec">
<ul>
<li><a href='/web_design/html/html.html' title="html/xhtml">html/xhtml</a></li><li><a href='/web_design/html5/html5.html' title="html5">html5</a></li><li><a href='/web_design/css/css.html' title="CSS">CSS</a></li><li><a href='/web_design/xml/xml.html' title="XML/XSLT">XML/XSLT</a></li><li><a href='/web_design/dreamweaver/dreamweaver.html' title="Dreamweaver教程">Dreamweaver教程</a></li><li><a href='/web_design/frontpage/frontpage.html' title="Frontpage教程">Frontpage教程</a></li><li><a href='/web_design/xinde/xinde.html' title="心得技巧 ">心得技巧 </a></li><li><a href='/web_design/bootstrap/bootstrap.html' title="bootstrap">bootstrap</a></li><li><a href='/web_design/vue/vue.html' title="vue">vue</a></li><li><a href='/web_design/angularjs/angularjs.html' title="AngularJS">AngularJS</a></li><li><a href='/web_design/hbuilder/hbuilder.html' title="HBuilder教程">HBuilder教程</a></li><li><a href='/web_design/css3/css3.html' title="css3">css3</a></li><li><a href='/web_design/compatibility/compatibility.html' title="浏览器兼容">浏览器兼容</a></li><li><a href='/web_design/divcss/divcss.html' title="div/css">div/css</a></li><li><a href='/web_design/editor/editor.html' title="网页编辑器">网页编辑器</a></li><li><a href='/web_design/axure/axure.html' title="axure">axure</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="tabTitleBar mt10 bgf borderTblue">
<div class="borderTnone pb10 YaHei">
<h4 class="blue">最近更新的内容</h4>
<ul class="newsListA">
<ul>
<li><a href="/web_design/html5/201812/247457.html" title="像这种网站效果，整屏整屏换有没有什么名字？" target="_blank">像这种网站效果，整屏整屏换有没有什么名字？</a></li>
<li><a href="/web_design/html5/201812/248222.html" title="分享全球十款超强HTML5开发工具_html5教程技巧" target="_blank">分享全球十款超强HTML5开发工具_html5教程技巧</a></li>
<li><a href="/web_design/html5/201812/246767.html" title="HTML5实战与剖析之CSS选择器——querySelector()" target="_blank">HTML5实战与剖析之CSS选择器——querySelector()</a></li>
<li><a href="/web_design/html5/201812/244966.html" title="html5的canvas实现画出简单的矩形和三角形" target="_blank">html5的canvas实现画出简单的矩形和三角形</a></li>
<li><a href="/web_design/html5/20178/159213.html" title="HTML5之HTML元素扩展(上)—新增加的元素及使用概述" target="_blank">HTML5之HTML元素扩展(上)—新增加的元素及使用概述</a></li>
<li><a href="/web_design/html5/20178/158907.html" title="检测浏览器对HTML5和CSS3支持度的方法" target="_blank">检测浏览器对HTML5和CSS3支持度的方法</a></li>
<li><a href="/web_design/html5/201812/247805.html" title="强大的HTML5幻灯片系统：H5Slides" target="_blank">强大的HTML5幻灯片系统：H5Slides</a></li>
<li><a href="/web_design/html5/20178/159030.html" title="HTML5 visibilityState属性详细介绍和使用实例" target="_blank">HTML5 visibilityState属性详细介绍和使用实例</a></li>
<li><a href="/web_design/html5/201812/247880.html" title="IE支持HTML5的解决方法_html5教程技巧" target="_blank">IE支持HTML5的解决方法_html5教程技巧</a></li>
<li><a href="/web_design/html5/201812/248381.html" title="整理HTML5中表单的常用属性及新属性_html5教程技巧" target="_blank">整理HTML5中表单的常用属性及新属性_html5教程技巧</a></li>
</ul>
</ul>
</div>
</div>
</div>
</div><!--end fl-->
</div><!--end content-->
<div id="footer">
<div class="main clearfix">
<p>
<a href="http://www.linkedu.com/about/about.html" target="_blank">关于我们</a> -
<a href="http://www.linkedu.com/about/linkus.html" target="_blank">联系我们</a> -
<a href="http://www.linkedu.com/about/disclaimer.html" target="_blank">免责声明</a> -
<a href="http://www.linkedu.com/about/index.html" target="_blank">网站地图</a>
</p>
<p>©2020-2025 All Rights Reserved. linkedu.com 版权所有 </p>
</div>
</div><!--end footer-->
<script type=text/javascript src="/template/js/common.js"></script>
<!--end footer-->
</div>
</body>
</html>