HTML5 Web Storage深度解析：sessionStorage与localStorage
154 浏览量
更新于2024-08-27
收藏 77KB PDF 举报
“HTML5 web本地存储实例详解”
HTML5中的Web Storage特性为开发者提供了一种在客户端存储数据的有效方式，显著增强了与用户交互时的数据管理能力。相较于传统的cookie，Web Storage提供了更大的存储空间，通常每个网站可以使用5MB，远超过cookie的4KB限制。Web Storage主要分为两种类型：sessionStorage和localStorage。
1. sessionStorage：数据存储在会话中，仅在当前浏览器窗口或标签页内有效。当浏览器窗口或标签页关闭后，存储的数据会被清除。这种类型的存储适合保存用户的临时信息，例如页面状态或表单数据，以便用户在同一次浏览会话中能够恢复。
2. localStorage：数据长期保存在客户端，即使浏览器关闭或重新启动，数据依然存在。这使得localStorage适用于保存用户设置、游戏进度等持久化信息。
无论是sessionStorage还是localStorage，它们提供的API接口基本一致，主要包括以下几个常用方法：
- `setItem(key, value)`: 用于存储键值对，其中key和value都必须是字符串。例如，`localStorage.setItem('name', 'John')`将键为'name'，值为'John'的项存入localStorage。
- `getItem(key)`: 通过键来获取对应的值。例如，`localStorage.getItem('name')`将返回'John'。
- `removeItem(key)`: 删除指定键的项。例如，`localStorage.removeItem('name')`会移除键为'name'的项。
- `clear()`: 清空整个存储空间，删除所有的键值对。
- `key(index)`: 返回存储中指定索引位置的键。例如，`localStorage.key(0)`将获取第一条存储项的键。
以下是一个简单的通讯录应用示例，展示了如何使用localStorage来实现数据的存取和查询功能：
```html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5本地存储之WebStorage篇</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">
<label for="phone_number">手机号：</label>
<input type="text" id="phone_number" name="phone_number">
<button onclick="saveContact()">保存</button>
<button onclick="searchContact()">查找</button>
<button onclick="displayContacts()">显示所有联系人</button>
<ul id="contact_list"></ul>
</div>
<script>
function saveContact() {
const name = document.getElementById('user_name').value;
const phone = document.getElementById('phone_number').value;
localStorage.setItem(phone, name);
}
function searchContact() {
const phone = prompt("请输入手机号码");
if (localStorage.getItem(phone)) {
alert(`找到机主：${localStorage.getItem(phone)}`);
} else {
alert("未找到联系人信息");
}
}
function displayContacts() {
const list = document.getElementById('contact_list');
list.innerHTML = '';
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const name = localStorage.getItem(key);
const li = document.createElement('li');
li.textContent = `${name} - ${key}`;
list.appendChild(li);
}
}
</script>
</body>
</html>
```
在这个例子中，用户可以通过输入框输入姓名和手机号，点击“保存”按钮将数据存储到localStorage。当用户选择“查找”时，会弹出一个对话框要求输入手机号，然后应用程序会检查localStorage中是否存在该手机号并显示相应的姓名。最后，“显示所有联系人”按钮会列出localStorage中存储的所有联系人信息。
通过这个实例，我们可以看到Web Storage如何方便地在客户端存储和检索数据，提高用户体验，同时减少了服务器端的负担。然而，需要注意的是，由于数据存储在本地，安全性成为一个重要的考虑因素，因此不应在localStorage中存储敏感信息。此外，尽管存储空间较大，但仍然有限，因此在设计应用时应合理利用并优化存储策略。
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复制内容到剪贴板
<!DOCTYPEHTML>
<html>
<head>
<metacharsetmetacharset="utf-8"/>
<title>HTML5本地存储之WebStorage篇</title>
</head>
<body>
<divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">
<labelforlabelfor="user_name">姓名：</label>
<inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>
<br/>
<labelforlabelfor="mobilephone">手机：</label>
<inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>
<br/>
<inputtypeinputtype="button"onclick="save()"value="新增记录"/>
<hr/>
<labelforlabelfor="search_phone">输入手机号：</label>
<inputtypeinputtype="text"id="search_phone"name="search_phone"/>
<inputtypeinputtype="button"onclick="find()"value="查找机主"/>
<pidpid="find_result"><br/></p>
</div>
<br/>
<dividdivid="list">
</div>
</body>
</html>
写完页面的话，展示效果差不多就是如下图：
下载后可阅读完整内容，剩余3页未读，立即下载
3070 浏览量
2012-03-05 上传
2014-12-08 上传
2023-09-08 上传
2023-09-01 上传
2023-06-10 上传
2024-01-22 上传
2023-05-17 上传
2023-07-16 上传
weixin_38584043
- 粉丝: 4
- 资源: 947
我的内容管理
展开
最新资源
- 前端面试必问：真实项目经验大揭秘
- 永磁同步电机二阶自抗扰神经网络控制技术与实践
- 基于HAL库的LoRa通讯与SHT30温湿度测量项目
- avaWeb-mast推荐系统开发实战指南
- 慧鱼SolidWorks零件模型库：设计与创新的强大工具
- MATLAB实现稀疏傅里叶变换(SFFT)代码及测试
- ChatGPT联网模式亮相，体验智能压缩技术.zip
- 掌握进程保护的HOOK API技术
- 基于.Net的日用品网站开发：设计、实现与分析
- MyBatis-Spring 1.3.2版本下载指南
- 开源全能媒体播放器：小戴媒体播放器2 5.1-3
- 华为eNSP参考文档：DHCP与VRP操作指南
- SpringMyBatis实现疫苗接种预约系统
- VHDL实现倒车雷达系统源码免费提供
- 掌握软件测评师考试要点：历年真题解析
- 轻松下载微信视频号内容的新工具介绍
