HTML5 Web Storage实例：创建通讯录应用

106 浏览量更新于2024-09-01 收藏 81KB PDF 举报

本文档深入解析了HTML5 Web本地存储实例的详细用法，着重介绍了WebStorage在现代网页开发中的重要性，它作为HTML5新增的一项功能，提供了比传统cookie更为强大且容量更大的数据存储解决方案。WebStorage主要包含两种类型：sessionStorage和localStorage，它们的区别在于数据的生命周期。sessionStorage的数据在会话结束时自动清除，而localStorage的数据则持久保存，直到用户主动清除或清理浏览器缓存。在实现本地存储时，开发者可以利用以下核心API进行操作： 1. `setItem(key, value)`: 用于保存数据，其中`key`是唯一的标识符，`value`是要存储的数据值，两者都必须为字符串类型。 2. `getItem(key)`: 可以获取指定`key`对应的存储值。 3. `removeItem(key)`: 删除指定`key`及其关联的数据。 4. `clear()`: 清除存储空间中的所有数据。 5. `key(index)`: 返回存储空间中指定索引处的键名。本文以实际应用举例，通过创建一个简单的通讯录小程序来展示如何使用这些API。程序功能包括：录入联系人信息（姓名和手机号），以手机号作为键值对存储于localStorage；检索特定手机号的联系人信息；以及列出所有已保存的联系人。在HTML结构部分，代码示例包含了基本的HTML元素，如`<html>`、`<head>`、`<meta>`标签和表单元素，用于输入姓名和手机号。`<body>`标签内的`<div>`元素设置了样式，用于显示联系人列表。通过这个实例，读者不仅能学习到如何在HTML5环境中利用WebStorage进行数据存储，还能理解如何结合前端交互设计实现基础的功能性应用。同时，这也有助于提升开发者对于HTML5新特性的理解和运用能力。

Html5 web本地存储实例详解本地存储实例详解

主要介绍了Html5 web本地存储实例详解的相关资料,需要的朋友可以参考下

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代码

XML/HTML Code复制内容到剪贴板

1. <!DOCTYPEHTML>

2. <html>

3. <head>

4. <metacharsetmetacharset="utf-8"/>

5. <title>HTML5本地存储之WebStorage篇</title>

6. </head>

7. <body>

8. <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">

9. <labelforlabelfor="user_name">姓名：</label>

10. <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>

11. <br/>

12. <labelforlabelfor="mobilephone">手机：</label>

13. <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>

14. <br/>

15. <inputtypeinputtype="button"onclick="save()"value="新增记录"/>

16. <hr/>

17. <labelforlabelfor="search_phone">输入手机号：</label>

18. <inputtypeinputtype="text"id="search_phone"name="search_phone"/>

19. <inputtypeinputtype="button"onclick="find()"value="查找机主"/>

20. <pidpid="find_result"><br/></p>

21. </div>

22. <br/>

23. <dividdivid="list">

24. </div>

25. </body>

26. </html>

写完页面的话，展示效果差不多就是如下图：

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38562079

粉丝: 10
资源: 864

HTML5 Web Storage实例：创建通讯录应用

《HTML5开发精要与实例详解》配套源码

HTML+5开发精要与实例详解代码清单

HTML5本地存储和本地数据库实例详解

C#实现DevExpress本地化实例详解

html5 实例详解

HTML5开发精要与实例详解

HTML5 开发精要与实例详解

HTML5开发精要与实例详解 pdf

HTML5开发精要与实例详解代码清单

html5开发精要与实例详解.pdf

最新资源