HTML5 Web Storage深度解析：sessionStorage与localStorage
132 浏览量
更新于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页未读，立即下载
3073 浏览量
2012-03-05 上传
2020-12-14 上传
2020-09-03 上传
2018-07-14 上传
2016-08-23 上传
2013-04-15 上传
2014-12-08 上传
2013-05-21 上传
weixin_38584043
- 粉丝: 4
- 资源: 947
我的内容管理
展开
最新资源
- SSM Java项目：StudentInfo 数据管理与可视化分析
- pyedgar：Python库简化EDGAR数据交互与文档下载
- Node.js环境下wfdb文件解码与实时数据处理
- phpcms v2.2企业级网站管理系统发布
- 美团饿了么优惠券推广工具-uniapp源码
- 基于红外传感器的会议室实时占用率测量系统
- DenseNet-201预训练模型：图像分类的深度学习工具箱
- Java实现和弦移调工具：Transposer-java
- phpMyFAQ 2.5.1 Beta多国语言版：技术项目源码共享平台
- Python自动化源码实现便捷自动下单功能
- Android天气预报应用：查看多城市详细天气信息
- PHPTML类：简化HTML页面创建的PHP开源工具
- Biovec在蛋白质分析中的应用：预测、结构和可视化
- EfficientNet-b0深度学习工具箱模型在MATLAB中的应用
- 2024年河北省技能大赛数字化设计开发样题解析
- 笔记本USB加湿器：便携式设计解决方案
