青少年编程与数学 02-005 移动Web编程基础 13课题、本地存储

一、本地存储
二、应用场景
三、主要技术
四、应用示例

@课题摘要:本文介绍了移动端网页开发中的本地存储技术，包括Web存储、IndexedDB和Cookies。Web存储的localStorage允许数据跨浏览器会话持久保存，而sessionStorage用于会话级别的数据存储。本地存储特点包括大容量、持久性、同源策略、键值对形式的数据存储，以及通过window.localStorage对象提供的API操作。应用场景涵盖用户偏好设置、身份信息保存、长期数据保存等。主要技术方法包括HTML5 Web Storage、IndexedDB和Cookies，各有适用场景。文章还提供了一个使用localStorage存储和检索数据的示例，展示了如何保存用户输入的名字并在页面上显示。

一、本地存储

本地存储（Local Storage）是Web存储的一种，它允许网站和Web应用在用户的浏览器中存储数据。这些数据可以跨浏览器会话持久保存，即使关闭浏览器窗口后，数据依然存在，下次打开浏览器访问网站时，网站仍然可以读取这些数据。

本地存储的主要特点包括：

容量：通常提供至少5MB的存储空间。
持久性：数据存储在本地，并且没有过期时间，除非主动删除。
同源策略：只能访问与当前页面同源（协议、域名、端口号相同）的存储数据。
数据格式：存储的数据是键值对形式，以字符串的形式存储，如果需要存储复杂数据结构，需要先序列化为字符串。
API：通过JavaScript的window.localStorage对象提供的API进行操作，包括setItem、getItem、removeItem和clear等方法。

需要注意的是，本地存储的数据是与特定的协议、域名和端口号绑定的，不同的网站或同一网站的不同子域之间不能共享数据。此外，由于本地存储的数据存储在客户端，因此它不是安全存储敏感信息的地方，因为用户可以通过浏览器的开发者工具查看和修改这些数据。对于需要加密或更安全存储的数据，可以考虑使用sessionStorage（会话存储，数据在页面会话结束时被清除）或服务端的解决方案。

二、应用场景

移动端网页开发中本地存储的应用场景包括：

用户偏好设置：如主题颜色、语言设置等，可以存储在localStorage中，以便在用户下次访问时能够恢复这些设置。
用户身份信息：保存用户登录状态，以便后续访问无需重新登录，这通常使用localStorage来实现。
长期数据保存：保存一些用户操作数据或浏览历史，以便下次访问时继续使用，这可以通过localStorage实现。
临时数据存储：如表单数据的暂存、用户填写进度的保存等，这通常使用sessionStorage来实现。
页面跳转数据传递：在多页应用中，页面之间传递数据但不希望数据持久化，可以通过sessionStorage实现。
一次性设置：例如购买流程中保存用户选择的产品信息，用户关闭页面后清空，这可以通过sessionStorage实现。
缓存数据：localStorage可以用于缓存数据，例如缓存用户登录信息、搜索历史记录、商品列表等，以提高网站的加载速度，提升用户体验。
实现离线功能：localStorage可以用于实现离线功能，例如将用户数据存储到localStorage中，以便用户在离线状态下仍然可以访问数据。
简化数据交互：localStorage可以简化数据交互，例如将用户数据存储到localStorage中，然后在页面之间传递数据，避免频繁地向服务器发送请求。
保存部分提交的表单数据：如果用户正在填写一个长表单，localStorage可以帮助存储部分数据。即使在开始填写表单和提交表单之间的互联网断开，用户也不会丢失他们的输入，可以从停止的地方继续。

这些应用场景展示了本地存储在移动端网页开发中的多样性和实用性。

三、主要技术

移动端本地存储的主要技术方法包括以下几种：

HTML5 Web Storage：
- 包括localStorage和sessionStorage两种存储方式。localStorage用于持久化存储数据，数据在浏览器关闭后依然存在。sessionStorage用于会话级别的存储，数据仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
IndexedDB：
- IndexedDB是一个运行在浏览器中的非关系型数据库，可以存储大量结构化数据，支持事务处理，适合存储复杂数据和大量数据。
Cookies：
- 传统的客户端存储方式，适用于存储少量数据，如会话标识符。cookies-next是一个专为Next.js优化的高级cookie管理库，支持客户端和服务器端的cookie操作。

这些技术方法各有特点和适用场景，选择合适的存储方式可以提高应用性能和用户体验。

四、应用示例

下面是一个简单的移动端页面示例，展示了如何使用localStorage来存储和检索数据：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Example</title>
<style>body {font-family: Arial, sans-serif;padding: 20px;}input, button {padding: 10px;margin: 10px 0;font-size: 16px;}
</style>
</head>
<body><h2>Local Storage Example</h2><label for="username">Enter your name:</label>
<input type="text" id="username" placeholder="Your name">
<button onclick="saveName()">Save Name</button><p>Saved Names:</p>
<ul id="savedNames"></ul><script>
// 保存名字到localStorage
function saveName() {var username = document.getElementById('username').value;if (!username) {alert('Please enter a name.');return;}// 获取已经保存的名字列表var savedNames = JSON.parse(localStorage.getItem('savedNames')) || [];// 添加新名字到列表savedNames.push(username);// 将更新后的列表保存回localStoragelocalStorage.setItem('savedNames', JSON.stringify(savedNames));// 清空输入框document.getElementById('username').value = '';// 更新页面上的名字列表displaySavedNames();
}// 显示保存的名字列表
function displaySavedNames() {var savedNames = JSON.parse(localStorage.getItem('savedNames')) || [];var list = document.getElementById('savedNames');list.innerHTML = '';savedNames.forEach(function(name, index) {var listItem = document.createElement('li');listItem.textContent = name;list.appendChild(listItem);});
}// 页面加载时显示已保存的名字
window.onload = displaySavedNames;
</script></body>
</html>

这个示例中，我们创建了一个简单的用户界面，用户可以在文本框中输入名字，然后点击“Save Name”按钮保存名字。保存的名字会被存储在localStorage中，并且页面会显示所有已经保存的名字。

关键点解释：

保存名字：当用户点击“Save Name”按钮时，saveName函数会被触发。这个函数读取输入框中的值，将其添加到一个数组中，然后将数组转换为JSON字符串并存储在localStorage中。
显示名字：displaySavedNames函数从localStorage中读取保存的名字数组，创建一个列表项并将其添加到页面的<ul>元素中。
页面加载时显示名字：使用window.onload事件在页面加载时调用displaySavedNames函数，以确保页面加载时显示所有已经保存的名字。